在TinyMCE插件中使用jQuery

时间:2012-11-11 16:46:29

标签: jquery plugins tinymce

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

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

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

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

到目前为止我尝试过:

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

任何在TinyMCE插件中使用jQuery的人?怎么样?

更新/解决方案

感谢Thariama的建议,我能够让它发挥作用。您可以使用显式的tinymce.get()来获取编辑器,也可以使用传递给插件的init()方法的'ed'实例。然而事实证明,在初始阶段,你不能(还)以这种方式访问​​父节点。您可以在特定的处理程序中执行此操作。

E.g。

(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);
})($);

2 个答案:

答案 0 :(得分:4)

很容易

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

可以使用

访问jQuery
editor.getWin().parent.jQuery

答案 1 :(得分:-3)

根据我的经验,你不能对IFrame进行任何JS或jquery更改,所以这是不可能的。