javascript - TinyMCE v4 右对齐按钮不适用于 iframe

Question

我正在为我的最终客户提供 TinyMCE v4 编辑器。不幸的是，内置的“alignright”按钮不适用于视频(iframe)。有人知道如何仅使用所见即所得工具使 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 本身不会受到任何影响:/

提前致谢。

Answer 1

在类似的问题中，我创建了一个新的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
       }
    })
  })

 })