Question

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

用途

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

JS CODE

最简单的形式：

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()，而不是“可视”模式。

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

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

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

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

Answer 2

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

您使用的编辑器ID不是编辑器的ID 要验证这一点，请检查您的编辑器soure html元素的ID（在大多数情况下是textarea）。如果没有id设置，tinymce将使用＆＃34; content＆＃34;默认情况下。
根本没有编辑器初始化要验证这一点，您可以在javascript控制台中使用console.log（tinymce.editors）。如果没有初始化编辑器，那么你将获得一个空数组。

Answer 3

许多年后，也许这会帮助某人......

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

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

我已经在一个完全通过JS完全双向绑定的页面上成功管理了多个编辑器;编辑器使用jQuery('textarea#my_editor_id').on('keyup', fn)创建，然后没有初始内容，然后异步加载（在我的情况下通过AJAX），并通过多个编辑周期进行管理，无需服务器往返。如果不是稍微复杂的话，这是可能的。

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

3 个答案: