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

【问题标题】：How do I get tinyMCE editor instance by the element selector?如何通过元素选择器获取 tinyMCE 编辑器实例？
【发布时间】：2016-07-22 20:55:00
【问题描述】：

我想在使用 AJAX 请求创建之后设置 tinyMCE 编辑器的内容。我在页面上有几个编辑器。所有这些都初始化为：

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

每个编辑器都有一个不同的类来将它们彼此分开。在通过 AJAX 请求获取数据后，如何使用此类将内容设置到一个特定的编辑器？

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

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

编辑：

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

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

但是有更好的方法吗？

【问题讨论】：

标签： javascript jquery tinymce

【解决方案1】：

根据get() API，您传递给该调用的字符串必须是编辑器元素的ID，而不是类。

https://www.tinymce.com/docs/api/class/tinymce/#get

所以如果你想根据 ID 定位编辑器，你需要这样的东西：

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

...在你的 JavaScript 中是这样的...

tinymce.get('editor2').setContent('...content here...');

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

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

编辑：这取决于您要在编辑器的生命周期中何时调用get() 或activeEditor 方法。

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

<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>

这通常会失败，因为您不知道在 JavaScript 运行时 TinyMCE 是否已完成对 textareas 的初始化。请看这个小提琴：

http://fiddle.tinymce.com/gufaab/1

将内容加载到编辑器中的最佳方式是使用编辑器自己的“init”回调并将您的代码放入其中。例如：

tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    setup: function (editor) {
        editor.on('init', function () {
             this.setContent('The init function knows on which editor its called - this is for ' + editor.id);
        });
    } 
});

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

【讨论】：

使用 id 而不是类 - 明白了！谢谢！
实际上，您的方法不起作用。通过元素 id 访问 tinyMCE 返回 null。
@Boykodev - 请查看我帖子的更新。 什么时候调用这些方法很重要——如果它返回null 当你知道你有正确的ID 时，你可能会在编辑器初始化并准备好交互之前调用它。您可以使用 API 来解决该问题。
tinymce.get('editor2').setContent('...这里的内容...');这仅在 tinymce 处于可视模式时有效，在 tinymce 处于文本模式时不起作用。有什么解决办法吗？

【解决方案2】：

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

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

这是html

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

使用 init_instance_callback 因为如果您使用 ajax 请求设置内容，它可以比编辑器的初始化更快

【讨论】：

【解决方案3】：

当您使用 id 选择器而不是类选择器时，TinyMCE 效果更好。您可以在初始化编辑器时使用 init_instance_callback 设置您的内容。

这只有在你有一个 id 选择器时才有效。

HTML：

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

JS：

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

或

function setContent(editor) {
  editor.setContent("content here");
}

tinymce.init({
  selector: 'textarea#editor1',
  init_instance_callback: setContent
});

【讨论】：