javascript - 多个 TinyMCE 编辑器,但只有一个工具栏?

标签 javascript jquery tinymce edit-in-place

我环顾了论坛,但似乎无法找到这个问题的明确答案...

我在我们的网站上使用 jQuery 和 TinyMCE。我已经阅读了 TinyMCE 的文档,但恐怕还是迷路了。我们正在做一个界面,需要在页面的多个地方进行就地编辑。唯一的问题是,其中每一个都将在顶部的一个工具栏中提供来自 TinyMCE 的所有编辑选项。因此,概括一下,它是多个编辑器(每个编辑器都没有自己的工具栏,只有一个编辑或选择文本的地方)并且页面顶部只有一个工具栏来控制当时处于事件状态的文本框。

这是如何实现的?有可能吗?任何帮助,任何朝着正确方向的插入,任何关于这个问题的提示/技巧/知识都将是一个非常非常大的帮助。

谢谢,詹姆斯

最佳答案

我是这样处理 3.x 版本的(它是 Prototype 语法):

首先,我创建了一个工具栏包装器(在我的例子中,我将它附加到文档顶部的位置:固定:

<div id="externalToolbarWrapper"></div>

然后我在 tinyMCE-settings(针对每个编辑器)中设置设置函数,如下所示:

[...]
theme_advanced_toolbar_location : "external",
setup : function(ed) {
    ed.onInit.add(function(ed, e) {
        ed.onPostRender.add(function(ed, cm) {
            var toolbar = $(ed.id + '_external');
            // inserts the external toolbar in the external wrapper
            $('externalToolbarWrapper').insert(toolbar.hide());
        });
        ed.onRemove.add(function(ed) {
            if($(ed.id + '_external')) {
                // removes external toolbar
                $(ed.id + '_external').remove();
            }
        });
    });
}

这在我的案例中有效 - 编辑器在激活/停用时显示/隐藏工具栏。

关于javascript - 多个 TinyMCE 编辑器,但只有一个工具栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2959272/

相关文章:

internet-explorer - 在 IE 中 POST 后 tinymce textarea 值为空

javascript - 如何使用变量更改目标 <a>

java string.getBytes ("UTF-8") 等效的 javascript

javascript - 如何使用angularjs在 float 条形图点击事件上显示数据列表

javascript - jQuery addClass 之后/之前

jquery - 使用 Ajax 将数据发布到 Flask 时的 Python NoneTypeDataType

c# - 如何滚动到选择框中选定的项目

jquery - HTML Select - 使用 jQuery 在选择时更改 src 音频

javascript - 询问 TinyMCE 的状态以便在相同状态下重新初始化

javascript - 在TinyMce中,当编辑器处于焦点时如何更改容器的颜色?