无法在一页上显示多个 tinymce 编辑器答案

【问题标题】：Can't display multiple tinymce editors on one page无法在一页上显示多个 tinymce 编辑器
【发布时间】：2012-02-29 02:48:29
【问题描述】：

我有一个页面，我在其中同时使用手风琴和 tinymce。

对于手风琴控件中的每个展开/折叠组合，我都有一个编辑按钮。单击编辑按钮会显示一个带有 2 个输入的表单。第一个是文本框，第二个是文本区域。

我希望 textarea 是一个 tinymce 实例。手风琴控件有多个展开/折叠控件，我希望为每个控件显示一个 tinymce 实例。

我的tinymce初始化代码如下

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,|,blockquote,|,justifyleft,justifycenter,justifyright,justifyfull,|,paste,pastetext,pasteword,|,bullist,numlist,|,advhr,|,forecolor,formatselect",
    // theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "", //"cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "", //"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "", //"insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
});

当我在 chrome 和 firefox 上加载页面时，手风琴控件按预期显示。然而，tinymce 控件只出现在第一个折叠 div 中。折叠 div 的其余部分显示常规文本区域，而不是 tinymce 编辑器。

我没有在 IE 上测试过。

有人可以帮忙吗。我不确定我做错了什么。

提前致谢普奈特

【问题讨论】：

如何将 tinyMCE 绑定到 textareas？
我是否必须将每个 textarea 单独绑定到 tinymce？
不，您可以使用类选择器一次绑定所有文本区域。但要弄清楚问题，我需要知道你如何将 tinuMce 实例绑定到你的 textareas。
我没有做任何特别的事情。我只是在我的页面中添加一个指向 tiny_mce/tiny_mce.js 文件的脚本标签，我还添加了上面执行 tinyMCE.init 的 javascript 代码
好的，我明白了，您希望 tinyMce 替换所有文本区域。调用 tinyMce.init 时是否可以使用其他 textareas 标签？例如，其他文本区域可以通过 ajax 加载并插入到 DOM 中。

标签： ruby-on-rails-3 tinymce accordion

【解决方案1】：

尝试使用mode: 'exact', 并列出element 设置下的所有元素ID。

【讨论】：

根本不起作用。现在它甚至没有向我展示它之前向我展示的一个 tiny_mce
请发布您的确切设置
对不起，实际上我不知道所有将成为 textareas 的元素 ID 的名称。这就是为什么我无法在页面加载期间创建静态元素 ID 列表
是的，我确实知道页面加载时的 id。但是使用 tiny_mce 编辑器的所有元素的 id 将是相同的
那么您已经回答了自己的问题。这就是您不能拥有多个编辑器的原因。 id 必须是唯一的才能有多个。

【解决方案2】：

确保所有 textarea 元素的 id 不同，从而解决了这个问题。 textarea 是 tinymce 编辑器插件出现的地方

【讨论】：

【解决方案3】：

您可以在远程文件（例如 lib/tinytextarea.html）中分离 TinyMCE 代码，然后使用我的 jquery 插件加载它，该插件会在从远程文件加载时更改 textarea 的 id

$.fn.loadChangeTAreaId = function(urlpath,prefix,suffix){
    $(this).load(urlpath, function(data) {
        $(this).find('textarea[id]').andSelf().attr('id', function(index, previous) {

            return prefix+ previous+suffix;
        });
    })

如何使用？

$('#divContainer').loadChangeTAreaId('lib/tinytextarea.html','pre','suf');

如果之前的 textarea id 是 "elm" ，新的 id 是 "preelmsuf"

【讨论】：