代码之家 › 专栏 › 技术社区 › user254875486 TM Creative

将Tinymce编辑器动态添加到文本区域会杀死其他实例

tinymce ajax javascript

user254875486 TM Creative · 技术社区 · 15 年前

我有一个包含一个或多个文本区域的HTML页面,每个文本区域都有一个Tinymce编辑器(通过使用 tinyMCE.init({mode : "textareas", etc...}); . 一开始他们都按自己的意愿工作,没有问题。页面上还有一个按钮,用于向页面添加新的文本区域(使用Ajax)。在Ajax调用的处理程序中,我将responseText附加到页面上的某个DIV。之后,我尝试使用

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

在哪里? cnt 是某种偏移量, "text" + cnt 对于每个文本字段都是唯一的。

这很好地工作,除了在新编辑器到达之前页面上的所有tinymce编辑器现在都是空白的,不响应任何输入(也不键入或单击任何按钮)。如果我在页面中添加另一个文本区域,其中一个将有一个工作编辑器,前一个也将被杀死。

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

我也试过这么做 tinyMCE.init({...}) 同样,对于每个新的文本区域,这会产生相同的结果。

请帮帮我,我越来越沮丧和绝望…

5 回复 | 直到 7 年前

user254875486 TM Creative 15 年前

我知道问题出在哪里。我将生成inputfields的Ajax调用的responseText附加到已经保存了其他inputfields的DIV中。这就是问题所在。现在,我创建了一个新的DIV,在其中放置新的输入字段(所以每个具有tinymce编辑器的文本区域都在自己的DIV中)。这解决了我的问题。

Josh Crews 12 年前

我也遇到了这个问题,解决了什么问题:

动态添加每个新的文本区域时,需要 mceAddControl 添加到屏幕后添加到它。所以在为Tinymce添加新文本区域的同一个JS中,我运行

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

在哪里? tinymce 是我的Tinymce文本区的类吗?

Christopher Tokar 15 年前

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

user888132 7 年前

我正面临着这个问题,我为此损失了很多时间和时间,而这个Rael_的孩子找到了他的答案,我将为其他面临这个问题的人添加我的答案。

正在添加我的动态内容

currentDiv.innerHtml += newContent;

这将重新绘制所有的innerhtml,然后这些innerhtml似乎会破坏现有的tinymce编辑器。为了防止发生这种情况,您需要使用insertadjacenthl,如下所示:

currentDiv.insertAdjacentHTML('beforeend', newContent);

希望这能节省我失去的时间!

-2

Nicolas R 10 年前

在后面粘贴整个初始化代码 $(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!');
            }
        });
    }
});