将 TinyMCE 编辑器动态添加到 textarea 会杀死其他实例答案

【问题标题】：Dynamically adding TinyMCE-editor to textarea kills other instances将 TinyMCE 编辑器动态添加到 textarea 会杀死其他实例
【发布时间】：2011-01-14 19:45:38
【问题描述】：

我有一个带有一个或多个文本区域的 html 页面，每个文本区域都有一个 TinyMCE 编辑器（使用 tinyMCE.init({mode : "textareas", etc...}); 添加到它们。起初它们都可以正常工作，没有问题。页面上还有一个向页面添加新文本区域的按钮（使用 AJAX）。在 AJAX 调用的处理程序中，我将响应文本附加到页面上的某个 div。之后，我尝试使用

将 TinyMCE 添加到新文本字段

tinyMCE.execCommand("mceAddControl", false, "text" + cnt);

cnt 是某种偏移量，"text" + cnt 对于每个文本字段都是唯一的。

这工作正常，除了在新版本到来之前页面上的所有 TinyMCE 编辑器现在都是空白的，并且不响应任何输入（也不键入或单击它们的任何按钮）。如果我在页面上添加另一个文本区域，那么一个将有一个工作编辑器，并且前一个也将被杀死。

我尝试使用tinyMCE.init({mode : "none", etc...}); 将TinyMCE 单独添加到初始文本区域，并为每个文本区域调用tinyMCE.execCommand("mceAddControl", false, "text" + cnt);。但结果是一样的。

我也尝试为每个新的文本区域再次执行tinyMCE.init({...})，但结果相同。

请帮助我，我越来越沮丧和绝望......

【问题讨论】：

标签： javascript ajax tinymce

【解决方案1】：

已解决：

当您通过 jquery 添加新的 textarea 时，您可以调用波纹管函数。

addTinyMCE();

function addTinyMCE(){
  // Initialize
  tinymce.init({
    selector : "textarea",
}

【讨论】：

【解决方案2】：

我遇到了这个确切的问题，我为此浪费了几个小时，而 rael_kid 找到了他的答案，我将为面临这个问题的其他人添加我的答案。

我的动态内容被添加了

currentDiv.innerHtml += newContent;

这会重绘所有的 innerhtml，这似乎破坏了现有的 tinymce 编辑器。为了防止这种情况发生，您需要使用 insertAdjacentHTML，如下所示：

currentDiv.insertAdjacentHTML('beforeend', newContent);

希望这可以节省其他人我失去的时间！

【讨论】：

【解决方案3】：

在$(wrapper).append('write your fields row div or tr code here'); 之后粘贴整个初始化代码 //它工作正常:)

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
        editor_selector : "mceEditor",
        editor_deselector : "mceNoEditor",  
    theme_advanced_buttons1 : "code,bold,italic,underline,image,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink,|,tiny_mce_wiris_formulaEditor,tiny_mce_wiris_CAS,|,fullscreen,jbimages",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    plugins : 'inlinepopups,tiny_mce_wiris,jbimages',
    setup : function(ed) {
        // Add a custom button
        ed.addButton('mybutton', {
            title : 'My button',
            image : 'img/example.gif',
            onclick : function() {
                // Add you own code to execute something on click
                ed.focus();
                ed.selection.setContent('Hello world!');
            }
        });
    }
});

【讨论】：

【解决方案4】：

我也有这个问题，解决了什么问题：

动态添加每个新的文本区域时，需要在添加到屏幕后添加mceAddControl。因此，在为 tinymce 附加新文本区域的同一个 js 中，我运行了

$('.tinymce').each(function(){
    tinyMCE.execCommand('mceAddControl',false,$(this).attr('id'))
  });

tinymce 是我的 tinymce textarea 的类

【讨论】：

【解决方案5】：

我知道问题出在哪里。我将生成输入字段的 AJAX 调用的 responseText 附加到已经包含其他输入字段的 div 中。这就是问题所在。我现在创建一个新的 div，在其中放置新的输入字段（因此每个具有 tinyMCE 编辑器的文本区域都在他自己的 div 中）。这解决了我的问题。

【讨论】：

【解决方案6】：

我记得我曾经遇到过类似的问题...this thread 应该有帮助

【讨论】：

感谢您的回答，但该线程并不真正适用于我的问题。我现在尝试将数据保存在每个编辑器中，放置新编辑器，然后将旧数据放回旧编辑器中，但这也不起作用。新编辑器出现后，我无法对旧编辑器进行任何操作。