Question

我试图让tinymce编辑iframe与这个精彩的标签符号一起使用：

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

我已经成功安装了它们并且效果很好。

在我的例子中，我测试了以下内容：

加载一个tinymce组件，并使用HTML选项将以下代码保存在tinymce iframe中：测试
使用F5刷新后，结果保存完好，此代码保存在数据库中：

<p>test</p>

tinymce工作正常。

我接下来的测试是使用tabber：

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

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

代码完美保存在数据库中，结果完美地加载到输出视图中，显示两个选项卡，每个选项卡都包含其内容。
问题是在尝试使用tinymce再次编辑内容时，标签不会显示。内容完美地加载在tinymce iframe中，没有标签。如下所示：

测试firsttab

测试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是正确的路径。并在萤火虫看到它装载它。显示两条警报消息，因此似乎加载它，但仍然没有显示tinymce编辑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);
    });
});

Answer 2

多个浏览器在段落开始时出现空格和制表符问题。空格的解决方法是将它们作为受保护空间编码为onSave（如果它们位于开头）。选项卡的解决方案是使用具有类似行为的另一个字符，并在保存时替换它们。从数据库重新加载到编辑器中时，有必要重新编码内容。

无法使Tinymce编辑器iframe与tabifier一起使用

2 个答案: