Javascript 如何通过元素选择器获取 tinyMCE 编辑器实例？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36383626/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get tinyMCE editor instance by the element selector?
提问by Boykodev
I want to set a content of tinyMCE editor after it was created with an AJAX request. I have several editors on page. All them are initialised with:
我想在使用 AJAX 请求创建后设置 tinyMCE 编辑器的内容。我在页面上有几个编辑器。所有这些都初始化为：
tinymce.init({
selector: '.tiny-mce'
});
Each editor has a distinct class to separate it from each other. How do I use this class to set content to a one particular editor, after getting data with an AJAX request?
每个编辑器都有一个不同的类来将它们彼此分开。在使用 AJAX 请求获取数据后，如何使用此类将内容设置为一个特定的编辑器？
tinyMCE.get('.class_name') // returns null
I am searching API and SO and can't find a function to do such a simple thing.
我正在搜索 API 和 SO，但找不到一个函数来做这么简单的事情。
Edit:
编辑：
I found not so clean way to get the editor instance. When tinyMCE was created it added id with editor name to the element. Now I can do something like this:
我发现获取编辑器实例的方法不是很干净。当 tinyMCE 创建时，它向元素添加了带有编辑器名称的 id。现在我可以做这样的事情：
var id = $('.class_name').attr('id');
tinyMCE.get(id).setContent('new content');
But is there a better way?
但是有更好的方法吗？
回答by Michael Fromin
Per the get()API the string you pass to that call needs to be the IDof the editor element not a Class.
根据get()API，您传递给该调用的字符串需要是编辑器元素的ID，而不是类。
https://www.tinymce.com/docs/api/class/tinymce/#get
https://www.tinymce.com/docs/api/class/tinymce/#get
So if you want to target the editor based on the ID you need something like this:
所以如果你想根据 ID 定位编辑器，你需要这样的东西：
<textarea class='tiny-mce' id='editor1'></textarea>
<textarea class='tiny-mce' id='editor2'></textarea>
... and in your JavaScript something like this...
......在你的 JavaScript 中是这样的......
tinymce.get('editor2').setContent('...content here...');
If you only have one editor on the page you can also use
如果页面上只有一个编辑器，您也可以使用
tinymce.activeEditor.setContent('...content here...');
EDIT:It depends on whenin the editor's lifecycle you want to call the get()or activeEditormethods.
编辑：这取决于您想要在编辑器的生命周期中何时调用get()或activeEditor方法。
These won't return anything until after TinyMCE is fully initialized. If you have code like this:
在 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>
This will typically fail because you don't know if TinyMCE is finished initializing the textareas when your JavaScript is running. Please see this fiddle:
这通常会失败，因为您不知道 TinyMCE 在 JavaScript 运行时是否已完成对 textarea 的初始化。请看这个小提琴：
http://fiddle.tinymce.com/gufaab/1
http://fiddle.tinymce.com/gufaab/1
The best way to load content into the editor is to use the editor's own "init" callback and place your code in there. For example:
将内容加载到编辑器中的最佳方法是使用编辑器自己的“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);
});
}
});
...note that the init gets called for each editor (if there are multiple) and you have access to the editor object in the DOM if needed.
...请注意，每个编辑器（如果有多个）都会调用 init，如果需要，您可以访问 DOM 中的编辑器对象。
回答by Ruggero
You can use id in the selector and set content after the editor is initialized with the callback function:
您可以在选择器中使用 id 并在使用回调函数初始化编辑器后设置内容：
tinymce.init({
selector: 'textarea#tinymce1',
init_instance_callback : function(){
tinymce.get('tinymce1').setContent(data)
}
});
this is the html
这是 html
<textarea id="tinymce1"></textarea>
use init_instance_callback because if you set the content with the ajax request it can goes faster than the initialization of the editor
使用 init_instance_callback 因为如果您使用 ajax 请求设置内容，它可以比编辑器的初始化更快
回答by dayota
TinyMCE works better when you use id selector instead of class selector. You can use init_instance_callback to set your content when your editor is initialized.
当您使用 id 选择器而不是类选择器时，TinyMCE 效果更好。您可以在编辑器初始化时使用 init_instance_callback 来设置您的内容。
This only works if you have an id selector.
这仅在您有 id 选择器时才有效。
HTML :
HTML :
<textarea id="editor1"></textarea>
JS :
JS：
tinymce.init({
selector: 'textarea#editor1',
init_instance_callback: function (editor) {
editor.setContent("content here");
}
});
OR
或者
function setContent(editor) {
editor.setContent("content here");
}
tinymce.init({
selector: 'textarea#editor1',
init_instance_callback: setContent
});
