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

Question

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

我在我们的网站上使用jQuery和TinyMCE。 我已经阅读了TinyMCE的文档，但我还是迷路了。 我们正在做一个界面，需要在页面的多个位置进行就地编辑。 唯一的问题是，每个都将在顶部的一个工具栏中提供TinyMCE的所有编辑选择。 因此，回顾一下，它是多个编辑器（每个编辑器都没有自己的工具栏，只是编辑或选择文本的位置），页面顶部只有一个工具栏来控制当时活动的文本框。

怎么能实现这一目标？ 它甚至可能吗？ 任何帮助，任何正确方向的推动，任何关于这个问题的提示/技巧/知识将是一个伟大的，伟大的帮助。

谢谢，詹姆斯

Answer 1

我这样做的3.x版本（它是Prototype语法）：

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

<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

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

我做了类似的事情（有多个textareas），我需要加载tinyMCE，所以像按需加载然后在完成时销毁（模糊事件）可能就是你所追求的。

我不能给你所有的代码，因为它实际上是我雇主的知识产权的一部分，但这里有一个粗略的概述，希望应该有所帮助。 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

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

要实现您所描述的内容：

1. 首先禁用所有单个TinyMCE菜单项。
2. 禁用后，使用HTML创建自己的TinyMCE菜单并相应地设置样式。
3. 确定关注哪个TinyMCE textarea
4. 将新菜单中的操作应用到焦点的Textarea

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

首先，初始化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 bind确定当前焦点的文本区域：

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

}

然后用我们的textareas和菜单创建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，＃vitalic，＃ul等是你用来实现样式的html元素的id。 例如：

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

这个按钮会加粗文本，无论文本是什么样的tinymce。 虽然此功能的唯一缺点是，您必须做很多工作才能在打开或关闭时显示特定按钮的效果。 如果你不关心那，那么这将成功。

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