Skip to main content
 首页 » 编程设计

jquery之在 TinyMCE 插件中使用 jQuery

2026年07月28日5shangdawei

我正在为 TinyMCE 编写一个插件,我想使用 jQuery 对正在编辑的文档进行一些操作。

我不是在寻找一种将 TinyMCE 与 jQuery 一起使用的方法(例如选择器上的 .tinymce() 方法),我知道有解决方案。

基本上我需要在 TinyMCE 生成的 iframe 中包含 jQuery。

tinymce.dom.ScriptLoader 似乎在父窗口中加载,而不是在 iframe 中,因此这不是一个选项。

到目前为止我已经尝试过:

  • 通过 ScriptLoader 在父级和插件上下文中加载 jquery (后者根本没有效果,前者在错误的上下文中加载它)
  • 访问window.parent.$,它是未定义的(即使它是 加载到父窗口中)
  • RTFM 和谷歌搜索,但没有相关点击。如果插件打开一个对话框,则可以选择加载额外的 javascript,但这也不是我需要的。

有人在 TinyMCE 插件中使用 jQuery 吗?怎么办?

更新/解决方案

多亏了 Thariama 的建议,我才能够让它发挥作用。您可以使用显式的tinymce.get() 来获取编辑器,或者使用传递给插件的init() 方法的“ed”实例。然而事实证明,在 init 阶段本身,您还不能以这种方式访问​​父级。您可以在特定的处理程序中执行此操作。

例如

(function($) { 
  tinymce.create('tinymce.plugins.SOSamplePlugin', { 
    init: function(ed, url) { 
        $ = ed.getWin().parent.jQuery; // <- WON'T WORK! 
 
        ed.addCommand('soCmd', function(ui, v) { 
            if(e = ed.selection.getNode()) { 
                $ = ed.getWin().parent.jQuery; // <- WORKS! 
                $(e).wrap('<div class="sample" />'); 
                ed.execCommand("mceRepaint"); 
            } 
        }); 
        ed.addButton('SO', { 
           title: 'Title', 
           cmd: 'soCmd', 
           image: 'somebutton.png' 
        }); 
    }, 
    getInfo: function() { 
        return { 
            longname: 'Example Plugin', 
            author: 'Ivo', 
            authorurl: 'http://vanderwijk.info/', 
            infourl: 'http://vanderwijk.info', 
            version: '1.0' 
        }; 
    } 
  }); 
  tinymce.PluginManager.add('so', tinymce.plugins.SOSamplePlugin); 
})($); 

请您参考如下方法:

很简单

var editor = tinymce.get('your_editor_id'); 

可以使用 jQuery 访问

editor.getWin().parent.jQuery