在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 並且 All scripts are now loaded. ，因此script.js確實已加載。 但是，當我在tinyMCE中單擊.slideshow類div ，我既不會收到b警報，也不會收到c警報。

如何在tinyMCE中加載和運行jQuery / JS文件，並使其以與站點本身相同的方式執行？

我希望有一個官方支持的解決方案，但是如果這不可能，我將接受“ hack”。

Answer 1

問題在於TinyMCE使用了designMode，因此，要將js文件添加到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函數中。