TinyMCE onsubmit 不会填充文本区域。

Question

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

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

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

Answer 1

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

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

当您启动 AJAX 表单提交过程时：

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

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

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

TinyMCE 事件：

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

哪个更好？

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

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

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