javascript - 无法使 Tinymce 编辑器 iframe 与增粘剂一起使用

Question

我试图让 tinymce edit iframe 与这个美妙的 tabbifier 一起工作:

http://www.barelyfitz.com/projects/tabber

我已经成功安装了它们并且它们运行良好。

在我的示例中，我测试了以下内容:

1. 加载一个 tinymce 组件并使用 HTML 选项将以下代码保存在 tinymce iframe 中: 测试
2. F5刷新后完美保存，数据库中保存这段代码:

<p>test</p>

tinymce 运行完美。

我做的下一个测试是用 tabber:

1. 编辑 tinymce 组件框并使用 HTML 选项保存以下代码:

<div class='tabber' id='tabber1'>
    <div class='tabbertab' title='FIRSTTAB' >
        test firsttab
    </div>
    <div class='tabbertab' title='SECONDTAB' >
        test secondtab
    </div>
</div>

1. 代码完美保存在数据库中，结果完美加载到输出 View 中，显示两个选项卡，每个选项卡都有其内容。

2. 问题是在尝试使用 tinymce 再次编辑内容时，选项卡未显示。内容完美加载在 tinymce iframe 中，没有标签。如下图所示:

   测试第一个tab

   测试secondtab

里面的 HTML 代码很好，之前保存了正确的 tabbifier html 代码。

问题可能是 tinymce 的 iframe 无法加载或解释 tabber.js 的 javascript 并且它不显示选项卡。 我已经测试了使用此代码在 tinymce iframe 中加载 tabber.js 的 javascript，似乎加载了它，但仍未显示选项卡:

<script type="text/javascript">
      tinyMCE.init({
        mode:                              "exact",
        elements:                          "%s",
        theme:                             "%s",
        %s
        %s
        theme_advanced_toolbar_location:   "top",
        theme_advanced_toolbar_align:      "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing:           true
        %s
            setup : function(ed)
            {
                ed.onInit.add(function(ed, evt)
                {
                    alert("entered tiny");
                    // Load a script from a specific URL using the global script loader
                    //tinymce.ScriptLoader.load('/js/tabber/tabber.js');
                    // Load a script using a unique instance of the script loader
                    //var scriptLoader = new tinymce.dom.ScriptLoader();
                    //scriptLoader.load('C:\tabber.js');

                    // Load multiple scripts
                    var scriptLoader = new tinymce.dom.ScriptLoader();
                    scriptLoader.add('/js/tabber.js');
                    scriptLoader.loadQueue(function() { alert('All scripts are now loaded.'); });
                });
            }
      });
</script>

我还检查过/js/tabber.js 是正确的路径。并在 Firebug 上看到它正在加载它。 显示了两个警告消息，所以它似乎加载了它，但是 tinymce edit iframe 中的选项卡仍然没有显示。

欢迎任何帮助，非常感谢。

Answer 1

tinymce ScriptLoader 不在 iframe 中加载脚本。它提供了一种在 tinymce 初始化后在 主窗口 加载脚本的方法。由于没有记录，这非常令人困惑。

但是您绝对可以在 iframe 中加载脚本。这是魔术:

tinymce.init( { setup : function( ed ) {
    ed.on('init', function (args) {
        // get the iframe DOM
        var doc = args.target.contentDocument || args.target.contentWindow.document;

        // inject script into the DOM
        var s = doc.createElement('script');
        s.type = 'text/javascript';
        s.src = '/js/tabber.js';
        doc.getElementsByTagName('head')[0].appendChild(s);
    });
});