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

我环顾了论坛，但似乎找不到这个问题的确切答案

我在我们的网站上使用jQuery和TinyMCE。我看了TinyMCE的文件，但恐怕还是迷路了。我们正在做一个界面，需要在页面的多个位置进行就地编辑。唯一的问题是，每一个都将在顶部的一个工具栏中包含TinyMCE的所有编辑选项。因此，概括地说，有多个编辑器，每个编辑器都没有自己的工具栏，只有一个编辑或选择文本的地方，页面顶部只有一个工具栏，用于控制当时处于活动状态的文本框

如何做到这一点？有可能吗？在这个问题上的任何帮助、任何正确的方向、任何提示/提示/知识都将是一个巨大的帮助

---

谢谢，James，我知道有一种方法可以在文本区域被聚焦时显示工具栏，然后在文本区域模糊事件中隐藏，所以这可能是一种方法

我对多个文本区域做了类似的事情，我在其中按需加载tinyMCE，所以像按需加载然后在完成模糊事件后销毁这样的事情可能就是你想要的

我不能把我所有的代码都给你，因为它实际上是我雇主I.p.的一部分，但这里有一个粗略的概述，希望能有所帮助。tinyMCE_GZ是tinyMCE现场以外gzip的一部分

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);
        });
    }
}

---

也许还有别的办法。看看这个例子

您可以使用底部的链接显示、隐藏、加粗、获取内容等，因为菜单可能需要一些样式。然后，获取当前处于焦点的文本区域的id，并将其传递到“当前”菜单，然后使用它更改该文本区域

要实现您所描述的目标：

首先禁用所有indivudual TinyMCE菜单项。 一旦它们被禁用，用HTML创建您自己的TinyMCE菜单并相应地设置样式。 确定聚焦的TinyMCE文本区域 将新菜单中的操作应用到聚焦的文本区域 现在对于一些代码可能需要一些调试

首先，初始化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>

---

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

http://examples.dtbaker.com.au/code/tinymce/

但尚未使用最新版本重新生成此版本：

但基本上有两种方法：

1在活动的tinymce编辑器上创建自己的菜单，调用tinymce参数

2将tinymce工具栏/菜单设置为外部，以便在聚焦编辑器时显示。然后使用CSS将每个工具栏放置在相同的位置。因此，看起来只有一个工具栏，但实际上，多个工具栏出现在同一个位置

---

希望这能有所帮助。

我对3.x版做了如下处理，它的原型语法：

首先，我创建了一个工具栏包装，在我的示例中，我将其附加在文档顶部的位置：fixed:

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

---

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

我正在为这个问题提供解决方案，以防有人仍然来这里。单击自定义按钮时，可以使用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');
});

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

其中，粗体、斜体、ul等是用于实现样式化的html元素的ID。例如：

// 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');
});

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

此按钮将加粗文本，无论文本位于tinymce的哪个实例中。 尽管此功能的唯一缺点是，当特定按钮处于打开或关闭状态时，您需要做大量工作来显示其效果。如果你不关心这一点，那么这就可以了

---

我希望它能帮上忙…

-这是外部工具栏示例感谢您的回复。我已经浏览了TinyMCE网站上的所有示例，虽然它们为我指明了正确的方向，但它们不是我想要的。我正在深入研究API和execCommand方法。这可能就是我想要的。js是不正确的。您从未关闭过ed.onInit.add确实是ed.onPostRender.add和ed.onREmove.add必须在ed.onInit.add中？当您编写$'externalToolbarWrapper'时，是否确实要编写$'externalToolbarWrapper'，否？我添加了缺少的右括号。选择器$'externalToolbarWrapper'在原型语言中是正确的。这真的值得否决吗？因为这是一个糟糕的答案？我添加了原型提示，因为OP可能考虑了jQuery。是的，我考虑了jQuery，因为问题是针对jQuery框架的。downvote是因为这个js永远不会工作，因为它有语法错误，答案是针对其他框架的。现在，语法错误是正确的，关于使用的框架的提示是add，所以我删除了您的下一票 ror是$ed.id+'''u external'而不是$+ed.i+''u external'，并且jQuery.insert不存在！