[英]How do I get tinyMCE editor instance by the element selector?
我想在使用 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');
但是有更好的方法吗?
根据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>
这通常会失败,因为您不知道 TinyMCE 在 JavaScript 运行时是否已完成对 textarea 的初始化。 请看这个小提琴:
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 并在使用回调函数初始化编辑器后设置内容:
tinymce.init({
selector: 'textarea#tinymce1',
init_instance_callback : function(){
tinymce.get('tinymce1').setContent(data)
}
});
这是 html
<textarea id="tinymce1"></textarea>
使用 init_instance_callback 因为如果您使用 ajax 请求设置内容,它可以比编辑器的初始化更快
当您使用 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
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.