javascript - 在 TinyMCE iframe 中加载 jQuery 文件

Question

我正在尝试在我的tinyMCE实例中运行我的网站的script.js主javascript文件。我们的想法是让功能(例如我的网站幻灯片放映)也在tinyMCE 内运行，以实现最佳的真实编辑。

我什至不确定这是否符合我的意图。

这是我用来初始化的函数:

function set_html_tinymce() {
    tinymce.init({
        selector:'#edit_html_textarea',
        ... ...
    });

    // LOAD jQUERY AND SCRIPT.JS INSIDE TINYMCE
    var scriptLoader = new tinymce.dom.ScriptLoader();
    scriptLoader.add('http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
    scriptLoader.add('../js/script.js');
    scriptLoader.loadQueue(function() {
       alert('All scripts are now loaded.');
    });
}

这是我的测试 script.js 的内容:

$( document ).ready(function() {

    alert('a');

    $('.slideshow').on('click', function() {
        alert('b');
    });

    $('.slideshow').click(function() {
        alert('c');
    });

});

我收到第一个警报 a 和 所有脚本现已加载。，因此 script.js确实已加载。但是，当我单击 tinyMCE 内的 .slideshow 类 div 时，我既没有收到 b 也没有收到 c 警报。

如何在tinyMCE中加载和运行jQuery/JS文件，并使其以与在网站本身上相同的方式执行？

我希望有一个官方支持的解决方案，但如果这不可能，我会选择“黑客”。

Answer 1

问题在于TinyMCE使用designMode，因此为了向iframe添加js文件，必须首先关闭designMode。

这个解决方案对我有用:

var editor = $(tinymce.activeEditor.getBody())[0];
var iframe = $R('txtTinyMCE_ifr');

editor.designMode = 'off';

var script = iframe.contentDocument.createElement('script');
script.setAttribute('src', '../../scripts/tinymce/iframe.js');
editor.appendChild(script);

editor.designMode = 'on';

您应该将此代码添加到 TinyMCE 的 init_instance_callback 函数中。