Question

我正在为我的最终客户提供TinyMCE v4编辑器。不幸的是，内置的“对齐”按钮不适用于视频（iframe）。有没有人知道如何只用WYSIWYG-Tools将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事件中看到的那样，您可以放置自定义侦听器：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
       }
    })
  })

 })

TinyMCE v4对齐按钮不适用于iframe

1 个答案: