TinyMCE onsubmit 不会填充文本区域。

Question

你能告诉我如何将表单上的所见即所得内容提交到相应的文本区域吗？

我对表单提交进行了 javascript 验证，但是当验证代码被触发时，编辑器 textareas 为空。所以我仍然收到错误“需要字段...”。我不明白 TinyMCE 如何处理这个问题，但这毫无意义。我的 js 验证事件侦听器位于脚本的最后，但 textareas 仍然是空的。

是否有一些触发器可以强制 TinyMCE 在提交时使用内容填充文本区域？

Answer 1

默认情况下，TinyMCE 将<textarea>在通过标准 HTML 表单提交提交表单时自动更新底层。这是 TinyMCE 的内置行为，因为<textarea>大多数应用程序不需要保持持续同步的开销。

如果您不依赖于标准的 HTML 表单提交事件，您有几个选择...

当您开始 AJAX 表单提交过程时：

TinyMCE 有一个triggerSave()方法可以强制编辑器<textarea>立即同步。

https://www.tinymce.com/docs/api/tinymce/root_tinymce/#triggersave

triggerSave()当您的用户想要提交表单然后执行验证时，您可以调用第一件事。

TinyMCE 事件：

正如您对自己问题的回答所示，您当然可以依靠各种编辑器事件将编辑器同步到<textarea>viatriggerSave()方法。这没有技术问题，只要知道如果您依赖于诸如更改事件之类的事件，您可能会触发大量这些事件。如果您在一个页面上有大量/复杂的 HTML 内容或许多编辑器不断与底层同步<textarea>可能会影响浏览器的性能。

哪个更好？

如果您不需要对内容进行实时验证……仅triggerSave()在 AJAX 提交过程开始时调用可能更容易（不需要与所需事件相关的 TinyMCE 配置代码），并且为浏览器创建的开销更少。

如果您确实需要对内容进行实时验证……使用诸如更改事件之类的事件来同步<textarea>是更好的解决方案。它可能看起来像这样：

tinymce.init({
  selector: "#myTextarea",
  ...
  setup: function (editor) {
      editor.on('change', function () {
          tinymce.triggerSave();
      });
  }
});