我试图让 tinymce 编辑 iframe 与这个美妙的 tabbifier 一起工作:
http://www.barelyfitz.com/projects/tabber
我已经成功安装了它们,它们工作得很好。
在我的示例中,我测试了以下内容:
- 加载一个 tinymce 组件并使用 HTML 选项将以下代码保存在 tinymce iframe 中:test
- 用 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 中,没有标签。如下图所示:
测试第一个标签
测试第二个标签
它里面的 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 中的选项卡。
欢迎任何帮助,非常感谢。