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

标签 javascript iframe youtube tinymce-4

我正在为我的最终客户提供 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 本身不会受到任何影响:/

提前致谢。

最佳答案

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

 })

关于javascript - TinyMCE v4 右对齐按钮不适用于 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41030386/

相关文章:

javascript - 在我的插件中添加短代码 WordPress

javascript - 完成后如何获取多个异步调用的返回值?

c# - 从 iFrame 内的 UpdatePanel 调用父页面 javascript

youtube - 是否有任何形式的youtube-startup合作伙伴关系?

Android:YouTubePlayer 在 childactivity 中不起作用

javascript - YouTube 嵌入视频播放器的外部播放按钮

javascript - 使用 JavaScript 检测 'touch screen' 设备的最佳方法是什么?

javascript - 导轨 : Filling in a dynamic field using capybara

html - 在 chrome 中将 pdf 呈现为 iframe

html - 框架。从不同的移动设备获取相同的 iframe 点