CODEWITHSUNDEEP
javascriptjqueryhtmltinymcetinymce-4
Phi Huynh
Phi Huynh

Reputation: 197

Tinymce Editor: content not update when click another button in Form

I have the following form:

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

I use tinymce editor inside the form:

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

Once i click the submit button after the content is updated:

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

Content still is the old content.

UPDATED

Ajax code:

$('#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;
});

How can I fix this?

Please help me!

Thank you very much!

Upvotes: 0

Views: 2705

Answers (1)

Michael Fromin
Michael Fromin

Reputation: 13744

If you are using AJAX to submit the form you need to use the tinyMCE.triggerSave() API call to get TinyMCE to update the underlying <textarea>.

When you load TinyMCE your original <textarea> is actually "hidden" by an iFrame and other DOM elements that TinyMCE loads into the page. As you are typing into TinyMCE the editor does not continually keep the <textarea> in sync.

Calling tinyMCE.triggerSave() will force the editor to update the underlying <textarea> and then you can use AJAX to submit the form that contains the <textarea>.

I suspect that you will need to add it before this portion of your code as this appears to expect the <textarea> to have correct content.

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

Upvotes: 4

Related Questions