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

Question

我想在使用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');

但有更好的方法吗？

Answer 1

根据get()API,传递给该调用的字符串需要是编辑器元素的ID而不是Class.

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>

这通常会失败,因为您不知道TinyMCE是否在JavaScript运行时完成初始化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中的编辑器对象.