动态向新的文本区域添加tinymce编辑器

Question

我该如何做到这一点

function addTinyText(id, text){
//add textarea to DOM
$('<textarea id="txt'+id+'"></textarea>').append(text).appendTo('body');
//init tineMCE
 tinyMCE.init({
        theme : "advanced",
        plugins : "emotions,spellchecker"
});
//add tinymce to this
tinyMCE.execCommand("mceAddControl", false, 'txt'+id);
}

但结果是每次我们都有一个新的textarea和tinyMCE，但里面没有文本。

我做错了什么？

- Luciuz

---

我的浏览器是Chrome 16 - 我的代码在上面运行得非常好。可能有一些冲突存在。 - Luciuz

问题，如果文本包含<p></p>、<img />和其他标签 - Luciuz

在TinyMCE加载后，MB解决方案是使用tinyMCE.get('textareaId').setContent('<p>html</p>')。是否有onload触发器？ - Luciuz

你可以在 document.ready 块内使用你的代码。 - Thariama

我尝试将此函数设置为按钮的回调函数，并希望在单击按钮时创建该区域。如果我创建按钮1（使用mce创建文本区域）和按钮2（将内容设置到文本区域），然后单击第一个按钮，等待tinymce加载完成，然后单击第二个按钮 - 一切都会没问题。 - Luciuz

Answer 1

我花了很长时间寻找类似问题的答案。

即使我可以让编辑器出现，我的内容也无法发布。

我通过以下方式解决了这个问题：

    jQuery('.wysiwyg').tinymce({
      // Location of TinyMCE script
      script_url : 'path/tinymce/tiny_mce.js',

      // General options
      theme : "advanced",
     .........
     .........
     ......... etc

我使用标准 jQuery 代码将所有 class 名称为 wysiwyg 的文本区域初始化为 tinymce 对象。

在 ajax 调用完成后，加载新的文本区域，我运行此函数：

jQuery(".wysiwyg").each(function(){ 
    tinyMCE.execCommand("mceAddControl",false, this.id);
});

现在我的代码最终被正确发布了。

- Dieter Gribnitz

---

@DentraAndres 非常感谢。所有关于这个主题的教程和博客文章都失败了。如果您正在尝试动态初始化TinyMCE文本区域，则这是一个重要细节。 - Henrik

对于其他阅读此文的人：我正在运行TinyMCE 4.0.28，这需要我将mceAddControl更改为mceAddEditor。截至2020年3月16日，当前版本的TinyMCE（5.2.0-75）也是如此。 - Bing

Answer 2

行

$('<textarea id="txt'+id+'"></textarea>').append(text).appendTo('body');

应该是一行

$('<textarea id="txt'+id+'"></textarea>').text(text).appendTo('body');

- Luciuz