3

我正在创建一个 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：空

我尝试了什么

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

任何帮助将不胜感激。

PS。运行我的测试时，内容文本区域是可见的。

4

3 回答 3

11

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

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

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

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

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

于 2013-05-22T13:12:48.807 回答
1

好吧，一个活生生的例子会有很大帮助。这样我只能猜测：它看起来有点好像你无法获得你想要的编辑器。有两个可能的原因进入我的脑海：

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

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

于 2013-05-22T09:33:54.083 回答
0

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

除了上面所说的一切之外，还需要对 JS 事件模型进行一些考虑。考虑：

  1. 在文档加载完成之前， TinyMCE 可能不会初始化（并且tinymce全局可能不可用）。OP 正确地将调用包装在 中jQuery(fn)，这将解决这个问题。如果您正在使用一个额外的框架来初始化并尝试操作编辑器（如 AngularJS 指令），则这是相关的。
  2. 部分初始化似乎是异步的，因此即使您将所有内容都包装在jQuery(fn)编辑器中，也可能要到稍后才能使用。WP 将 Underscore 加载为 Backbone 的一部分，因此将最初尝试定位编辑器的尝试包装起来_.defer(fn)似乎让我获得了很多里程。这也可以使用本机 JS 来完成setTimeout。
  3. 除了@m.spyratos 的精彩回答之外，请注意，您可以通过分别在用户选择 Visual 或 Text 时添加 jQueryclick事件处理程序来button.switch-tmce[data-wp-editor="my_editor_id"]挂钩模式更改事件（Visual/Text），这可能会有所帮助。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）并通过多个编辑周期进行管理，无需服务器往返。这是可能的，如果不是稍微复杂的话。

于 2018-03-21T04:17:38.277 回答