Javascript 如何通过元素选择器获取tinyMCE编辑器实例？

我想在使用AJAX请求创建tinyMCE编辑器之后设置它的内容。我在这一页上有几个编辑。所有文件均以以下字母草签：

tinymce.init({
        selector: '.tiny-mce'
    });

每个编辑器都有一个不同的类将其彼此分离。 在通过AJAX请求获取数据后，如何使用该类将内容设置为一个特定的编辑器

tinyMCE.get('.class_name') // returns null

我正在搜索API等，找不到一个函数来做这么简单的事情

编辑：

我发现获取编辑器实例的方法不太干净。创建tinyMCE时，它向元素添加了带有编辑器名称的id。现在我可以这样做：

var id = $('.class_name').attr('id');
tinyMCE.get(id).setContent('new content');

<textarea class='tiny-mce' id='editor1'></textarea>
<textarea class='tiny-mce' id='editor2'></textarea>    

<form method="post" action="dump.php">
    <textarea class='tiny-mce' id='editor1'></textarea>
    <textarea class='tiny-mce' id='editor2'></textarea>  
</form>
<script>
    tinymce.get('editor2').setContent("content here");
</script>

但是有更好的方法吗？

根据

get（）

API，传递给该调用的字符串必须是编辑器元素的ID，而不是类

因此，如果要基于ID以编辑器为目标，则需要如下内容：

var id = $('.class_name').attr('id');
tinyMCE.get(id).setContent('new content');

<textarea class='tiny-mce' id='editor1'></textarea>
<textarea class='tiny-mce' id='editor2'></textarea>    

<form method="post" action="dump.php">
    <textarea class='tiny-mce' id='editor1'></textarea>
    <textarea class='tiny-mce' id='editor2'></textarea>  
</form>
<script>
    tinymce.get('editor2').setContent("content here");
</script>

如果页面上只有一个编辑器，也可以使用

tinymce.activeEditor.setContent('...content here...');

EDIT:这取决于在编辑器的生命周期中何时调用

get（）

或

activeEditor

方法

在TinyMCE完全初始化之前，它们不会返回任何内容。如果您有这样的代码：

var id = $('.class_name').attr('id');
tinyMCE.get(id).setContent('new content');

<textarea class='tiny-mce' id='editor1'></textarea>
<textarea class='tiny-mce' id='editor2'></textarea>    

<form method="post" action="dump.php">
    <textarea class='tiny-mce' id='editor1'></textarea>
    <textarea class='tiny-mce' id='editor2'></textarea>  
</form>
<script>
    tinymce.get('editor2').setContent("content here");
</script>

---

…请注意，每个编辑器（如果有多个编辑器）都会调用init，如果需要，您可以访问DOM中的编辑器对象。

在使用回调函数初始化编辑器后，您可以在选择器中使用id并设置内容：

tinymce.init({
        selector: 'textarea#tinymce1',
init_instance_callback : function(){
tinymce.get('tinymce1').setContent(data)
}
});

这是html

<textarea id="tinymce1"></textarea>

---

使用init_instance_回调，因为如果使用ajax请求设置内容，那么使用id选择器而不是类选择器时，它比编辑器的初始化速度更快。 初始化编辑器时，可以使用init_instance_回调设置内容

这仅在您具有id选择器时有效

HTML:

<textarea id="editor1"></textarea>

tinymce.init({
  selector: 'textarea#editor1',
  init_instance_callback: function (editor) {
    editor.setContent("content here");
  }
});

或

---

使用id而不是类-明白了！谢谢实际上，你的方法不起作用。通过元素id访问tinyMCE将返回null。@Boykodev-请查看我文章的更新。当您调用这些方法时，这一点很重要-如果它返回

null

，当您知道您的ID正确时，您很可能在编辑器初始化并准备好交互之前调用它。有一些API可以用来解决这个问题。