WP - JS - 获取Tinymce编辑器的实例

Question

我正在创建一个Wordpress插件，它在包含按钮的帖子编辑器下添加了一个元数据metabox 。 该插件还会在结束</body>标记的正下方加载一个Javascript文件。

目的

目前，我想用插件实现的目标很简单。 当用户向编辑器输入内容然后单击元框内的按钮时，我想修改编辑器的内容。

JS代码

最简单的形式：

jQuery(document).ready(function($) {
   $('#button').on('click', function(e) {
      e.preventDefault();

      var editor = tinyMCE.get("content");
      editor.setContent(some_content);
   });
});

问题

问题是editor变量返回undefined 。

FIREBUG （尝试设置var editor ）

wpActiveEditor ：“内容”
editors ：[]
activeEditor ：null

我做了什么

我在Tinymce的文档和Stackoverflow上找到了很多很多东西（也有很多小的调整），但问题仍然存在。

任何帮助将非常感激。

PS。 运行我的测试时，内容textarea是可见的。

Answer 1

当编辑器首次加载“文本”模式激活时，tinymce不会被初始化，因此您不能使用tinyMCE.get() ，而不是“Visual”模式。

（我没有注意到它实际上在“可视”模式下工作，因为我一直在“文本”模式下测试它）

因此，必须使用条件语句来确定哪个选项卡处于活动状态。 我用这个方法解决了我的问题：

function setEditorContent(val) {
  var $_editorTextArea = $('#content');
  $_editorTextArea.is(':visible') ? $_editorTextArea.val(val) : tinyMCE.get('content').setContent(val);
}

希望这个答案可以防止一些头痛:)

Answer 2

好吧，一个现实的例子会有很多帮助。 这种方式我只能猜测：它看起来有点像你无法得到你想要的编辑器。 我想到了两个可能的原因：

1. 您正在使用的编辑器ID不是编辑器的ID要验证这一点，请检查您的编辑器soure html元素的ID（在大多数情况下是textarea）。如果没有id设置，tinymce将使用“content”作为默认值。

2. 根本没有编辑器初始化要验证这一点你可以在你的javascript控制台中使用console.log（tinymce.editors）。 如果没有初始化编辑器，那么你将获得一个空数组。

Answer 3

许多年后，但也许这将有助于某人......

除了上面提到的所有内容之外，还需要考虑JS事件模型。 考虑：

1. TinyMCE的可能不会初始化（与tinymce全球可能不可用），直到文件加载完成。 OP正确包装了jQuery(fn)调用，这将解决这个问题。 如果您正在使用添加的框架初始化并尝试操作编辑器（如AngularJS指令），则这是相关的。
2. 初始化的部分似乎是异步的，所以即使你在jQuery(fn)包装所有内容，编辑器可能在以后才可用。 WP加载Underscore作为Backbone的一部分，所以包装初始尝试在_.defer(fn)找到编辑器似乎给了我很多里程。 这也可以使用本机JS setTimeout来完成。
3. 除了@ m.spyratos的精彩答案之外，注意你可以通过向button.switch-tmce[data-wp-editor="my_editor_id"]添加jQuery click事件处理程序来挂钩模式更改事件（Visual / Text）可能会有所帮助button.switch-tmce[data-wp-editor="my_editor_id"]当用户分别选择“视觉”或“文本button.switch-html[data-wp-editor="my_editor_id"]时， button.switch-tmce[data-wp-editor="my_editor_id"]和button.switch-html[data-wp-editor="my_editor_id"] 。 您的版本可能会有所不同，但我发现切换到可视模式时textarea会消失，而当切换到文本模式时， tinymce.editor实例会消失。 当用户决定改变模式时，钩住这些事件提供了一种持久的方式来重新挂钩。
4. 作为快速参考，可以附加到编辑器的对象（ activeEditor或东西在editors[]其由编辑器ID键控）通过挂钩与编辑器来接收在可视化编辑的内容的任何和所有变化editor.on('NodeChange keyup', fn)和单个事件回调。 对于后人，我在我的解决方案中也包含blur 。 文本编辑器内容可以与jQuery('textarea#my_editor_id').on('keyup', fn)挂钩。

我已经在一个完全通过JS完全双向约束的页面上成功管理了多个编辑器; 编辑器是用wp_editor创建的，没有初始内容然后异步加载（在我的情况下通过AJAX）并通过多个编辑周期进行管理而无需服务器往返。 如果不是稍微复杂的话，这是可能的。