2016-12-08 27 views
1

我正在爲最終客戶提供TinyMCE v4編輯器。 不幸的是,內置的「alignright」按鈕不適用於視頻(iframe)。 有沒有人有一個想法如何獲得與所見即所得工具只右對齊的內置頁框?TinyMCE v4 alignright-button不適用於iframe

我已經嘗試添加了alignright的自定義按鈕,應該在類的alignright「添加到選定的元素:

editor.addButton('alignright-custom', { 
    text: 'alignright', 
    icon: false, 
    onclick: function() { 
     console.log(tinyMCE.activeEditor.selection.getNode()); 
     tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.selection.getNode(), 'alignright'); 
    } 
}); 

但是,TinyMCE的不將該類添加到iframe中,但一些奇怪的<span>相反,它似乎代表了iframe:

<span class="mce-preview-object mce-object-iframe alignright" data-mce-object="iframe" data-mce-p-src="//www.youtube.com/embed/blahblah" data-mce-selected="1" contenteditable="false"> 

iframe的本身不會以任何方式會受到影響:/

臨屋提前。

回答

0

在類似的問題中,我創建了一個新的tinymce插件,並利用jquery修改了內聯樣式。

正如您可以在ExecCommand事件中看到tinymce一樣,您可以放置​​自定義偵聽器:https://www.tinymce.com/docs/advanced/events/#execcommand此外,該事件還會記錄命令名稱,以便查看正確的事件。

也對https://www.tinymce.com/docs/advanced/creating-a-plugin/

看看您可以在此基礎上一段代碼插件:

tinymce.PluginManager.add('onAlighn',function(editor){ 

    var elem=undefined 

    editor.on('click',function(event){ 
     var element = event.target; 
     //check if iframe 
    }) 

    editor.on('ExecCommand',function(event){ 
     if(elem){ 
     console.log(event) 
     //Check furter the event 
     } 
    }) 
    }) 

})