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 和 All scripts are now loaded.，因此script.js确实已加载。但是，当我点击tinyMCE中的.slideshow课程div时，我既不会b也不会c提醒。

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

我希望获得官方支持的解决方案，但如果不可能，我会满足于'黑客'。

Answer 1

问题是TinyMCE使用的是designMode，所以为了将ifs格式添加到iframe，必须先关闭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函数中。

在TinyMCE iframe中加载jQuery文件

1 个答案: