javascript - Tinymce编辑器: content not update when click another button in Form

Question

我有以下表格:

<form method="post" action="example.com" id="form">
  <textarea id="content">{{$content_from_database}}</textarea>
  <button type="submit">Update</button>
</form>

我在表单中使用tinymce编辑器:

 tinymce.init({ 
    selector:'textarea#content'
 });

内容更新后单击提交按钮后:

$('textarea#content').val() = 'old content'

内容仍然是旧内容。

已更新

Ajax 代码:

$('#form').on('submit', function() {
  $.post(
   $(this).prop('action'), {
     "content": $('textarea[name=content]').val(),
   },
   function(d){
     console.log(d);
   },
   'text'
   ).done(function() {
     alert('successful');
   }).fail(function(e) {
     alert('failed');
   });
   return false;
}); 

我该如何解决这个问题？

请帮助我!

非常感谢!

Answer 1

如果您使用 AJAX 提交表单，则需要使用 tinyMCE.triggerSave() API调用让TinyMCE更新底层<textarea> 。

当您加载 TinyMCE 时，您的原始 <textarea>实际上被TinyMCE加载到页面中的iFrame和其他DOM元素“隐藏”。当您在 TinyMCE 中输入时，编辑器不会持续保留 <textarea>同步。

调用tinyMCE.triggerSave()将强制编辑器更新底层 <textarea>然后您可以使用 AJAX 提交包含 <textarea> 的表单.

我怀疑您需要在这部分代码之前添加它，因为这似乎需要 <textarea>要有正确的内容。

$(this).prop('action'), {
    "content": $('textarea[name=content]').val(),
}