多个TinyMCE编辑器，但只有一个工具栏？
我环顾了论坛，但似乎无法找到这个问题的明确答案……
我在我们的网站上使用jQuery和TinyMCE。 我已经阅读了TinyMCE的文档，但我还是迷路了。 我们正在做一个界面，需要在页面的多个位置进行就地编辑。 唯一的事情是，每个都将在顶部的一个工具栏中提供TinyMCE的所有编辑选择。 因此，回顾一下，它是多个编辑器（每个编辑器都没有自己的工具栏，只是编辑或选择文本的地方），页面顶部只有一个工具栏来控制当时活动的文本框。
怎么能实现这一目标？ 它甚至可能吗？ 任何帮助，任何正确方向的推动，任何关于这个问题的提示/技巧/知识都将是一个伟大的，很大的帮助。
谢谢，詹姆斯
我知道有一种方法可以在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); }); } } 我这样做的3.x版本（它是Prototype语法）：
首先，我创建了一个工具栏包装器（在我的例子中，我用位置附加它：固定在文档的顶部：
然后我在tinyMCE设置（对于每个编辑器）中设置设置function，如下所示：
[...] 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(); } }); }); }
这适用于我的情况 – 编辑器在激活/停用时显示/隐藏工具栏。
可能还有另一种方式。 看看这个例子。 http://tinymce.moxiecode.com/examples/example_23.php
您可以使用底部的链接（显示，隐藏，粗体，获取内容等）作为菜单（可能需要一些样式）。 然后，获取当前焦点的textarea的id并将其传递给菜单（#current）并使用它来更改该textarea。
要实现您所描述的内容：
- 首先禁用所有单个TinyMCE菜单项。
- 禁用它们后，用HTML创建自己的TinyMCE菜单并相应地设置样式。
- 确定关注哪个TinyMCE textarea
- 将新菜单中的操作应用到焦点的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
我用较旧版本的tinymce做了这个：
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=10197 http://examples.dtbaker.com.au/code/tinymce/
虽然没有用最新版本重新制作这个:(
但基本上有两种方法可以做到：
1）创建自己的菜单，在活动的tinymce编辑器上调用tinymce参数。
2）将tinymce工具栏/菜单设置为外部，以便在对焦编辑器时显示。 然后使用CSS将每个工具栏定位在同一位置。 所以看起来有一个工具栏，但事实上它是出现在同一个地方的多个工具栏。
希望有所帮助。
我正在为这个问题提供解决方案，万一有人还来这里。 您可以使用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。 例如：
这个按钮会加粗文本，无论文本是在哪个tinymce实例中。 虽然此function的唯一缺点是，您必须做很多工作才能在打开或关闭时显示特定按钮的效果。 如果您不关心这一点，那么这将成功。
我希望它有帮助……