多个 TinyMCE 编辑器，但只有一个工具栏？

Question

我浏览了论坛，但似乎找不到这个问题的明确答案...

我在我们的网站上使用 jQuery 和 TinyMCE。我已经阅读了 TinyMCE 的文档，但恐怕我仍然迷失方向。我们正在制作一个需要在页面中多个位置进行就地编辑的界面。唯一的事情是，每一个都将在顶部的一个工具栏中包含 TinyMCE 的所有编辑选项。因此，回顾一下，它是多个编辑器（每个编辑器没有自己的工具栏，只是一个编辑或选择文本的地方），并且页面顶部只有一个工具栏来控制当时处于活动状态的文本框。

如何才能实现这一目标？有可能吗？任何帮助，任何朝着正确方向的推动，任何关于这个问题的提示/技巧/知识都将是一个巨大的帮助。

谢谢，詹姆斯

Answer 1

我对 3.x 版本做了这样的操作（它是原型语法）：

首先，我创建了一个工具栏包装器（在我的例子中，我将其附加到文档顶部的位置：固定）：

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

然后我在tinyMCE-中设置了设置函数设置（对于每个编辑器）如下：

[...]
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();
            }
        });
    });
}

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

Answer 2

我知道有一种方法可以在文本区域聚焦时显示工具栏，然后在文本区域模糊事件上隐藏 - 所以这可能是一条路线。

我做了类似的事情（使用多个文本区域），其中我按需加载tinyMCE，所以像按需加载然后在完成（模糊事件）时销毁之类的东西可能就是您所追求的。

我无法向您提供我的所有代码，因为它实际上是我雇主 IP 的一部分，但这里有一个粗略的概述，希望对您有所帮助。 tinyMCE_GZ 是 gzip 的一部分，位于tinyMCE 站点之外。

isTinyMCE_Loaded = false;

jQuery('.my-textarea').one("click", function(){
    BuildWYSIWYG.Full(jQuery(this));
})

BuildWYSIWYG.OnDemand: function(callback){
    tinyMCE_GZ.init({
        plugins : 'style,table,advhr,advimage,advlink,insertdatetime,preview,searchreplace,contextmenu,paste,fullscreen,visualchars,nonbreaking,xhtmlxtras,safari,tinybrowser',
        themes : 'simple,advanced',
        languages : 'en',
        disk_cache : true,
        debug : false
    }, function(){ 
        isTinyMCE_Loaded = true; 
        callback();
    });
};
BuildWYSIWYG.Full: function(el){   
    settings.elements = jQuery(el).attr("id");

    // Build advanced wysiwyg
    if (isTinyMCE_Loaded){
        tinyMCE.init(settings);
    } else {
        BuildWYSIWYG.OnDemand(function(){
            tinyMCE.init(settings);
        });
    }
}

Answer 3

可能还有另一种方法。看一下这个例子。 http://tinymce.moxiecode.com/examples/example_23.php

您可以使用底部的链接（显示、隐藏、粗体、获取内容等）作为菜单（可能需要一些样式）。然后，获取当前焦点文本区域的 id 并将其传递给菜单 (#current) 并使用它来更改该文本区域。

要实现您所描述的目的：

1. 首先禁用所有单独的 TinyMCE 菜单项。
2. 禁用它们后，用 HTML 创建您自己的 TinyMCE 菜单并相应地设置其样式。
3. 确定聚焦的 TinyMCE 文本区域
4. 将新菜单中的操作应用到聚焦的文本区域

现在编写一些代码（可能需要一些调试...）

首先，初始化 TinyMCE 并禁用菜单。

tinyMCE configs 
({
    mode : "textareas",
    theme : "advanced",
    editor_selector : "editable"
    theme_advanced_buttons1 : "",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "botton",
    theme_advanced_statusbar_location : "bottom" });

我想你也可以编辑tiny_mce/themes/advanced/editor_template_src.js中的_addToolbars函数，然后打包。

然后使用 jQuery 绑定确定当前处于焦点的文本区域：

$().ready(function() {
        var current;
        $('.editable').focus(
            current = this.id;
        );
        $('.editable').blur(
            //maybe hide the menu (?)
        );

}

然后使用我们的文本区域和菜单创建 HTML

<form method="post" action="somepage">  
<div id="independent_menu">
    <!-- The Menu, Please Style Accordingly -->
    <a href="javascript:;" onmousedown="$('#current').tinymce().show();">[Show]</a>
    <a href="javascript:;" onmousedown="$('#current').tinymce().hide();">[Hide]</a>
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('Bold');">[Bold]</a>
    <a href="javascript:;" onmousedown="alert($('#current').html());">[Get contents]</a>
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getContent());">[Get selected HTML]</a>
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getContent({format : 'text'}));">[Get selected text]</a>
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getNode().nodeName);">[Get selected element]</a>
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert HTML]</a>
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('mceReplaceContent',false,'<b>{$selection}</b>');">[Replace selection]</a>
</div>

<!-- The Text Areas  -->

<textarea class="editable" id="one">Some Text Here</textarea>

<textarea class="editable" id="two">Yet another text area</textarea>

<textarea class="editable" id="three">Final Text Area</textarea>

Answer 4

我用旧版本的tinymce做到了这一点：

http://tinymce.moxiecode.com /punbb/viewtopic.php?id=10197
http://examples.dtbaker.com.au/code/tinymce/

虽然还没有用最新版本重新生成这个:(

但基本上有两种方法可以做到这一点：

1）创建自己的菜单来调用tinymce活动的tinymce编辑器的参数。

2）将tinymce工具栏/菜单设置为外部，以便当您聚焦编辑器时它会出现。然后使用 CSS 将每个工具栏放置在同一位置。所以看起来只有一个工具栏，但实际上是多个工具栏出现在同一个地方。

希望有帮助。

Answer 5

我正在为这个问题提供解决方案，以防有人仍然来这里寻求解决方案。您可以使用 execCommand 在单击自定义按钮时执行您喜欢的各种样式的文本。例如：

// bold, italic and underline
$('#bold').click(function(){
    tinymce.execCommand('Bold');
});
$('#italic').click(function(){
    tinyMCE.execCommand('Italic');
});
$('#underline').click(function(){
    tinyMCE.execCommand('Underline');
});

//commands for left align, right align and center align
$('#l-a').click(function(){
    tinyMCE.execCommand('JustifyLeft');
});
$('#c-a').click(function(){
    tinyMCE.execCommand('JustifyCenter');
});
$('#r-a').click(function(){
    tinyMCE.execCommand('JustifyRight');
});

//commands for inserting ul or ol
$('#ul').click(function(){
    tinyMCE.execCommand('InsertUnorderedList');
});
$('#ol').click(function(){
    tinyMCE.execCommand('InsertOrderedList');
});

其中 #bold、#italic、#ul 等是您用来实现样式的 html 元素的 id。例如：

<button id="bold">B</button>

此按钮会将文本加粗，无论文本位于tinymce 的哪个实例中。
尽管此功能的唯一缺点是您必须做大量工作才能显示特定按钮打开或关闭时的效果。如果您不关心这一点，那么这就会成功。

我希望它能有所帮助......