Question

我有以下表格：

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

我在表单中使用tinymce editor：

 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>实际上被一个iFrame和TinyMCE加载到页面中的其他DOM元素“隐藏”。当您输入TinyMCE时，编辑器不会继续保持<textarea>同步。

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

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

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

Tinymce编辑器：单击“表单”中的另一个按钮时内容不会更新

1 个答案: