Textarea not updating on editor.save()

[gusarg81]

Hi,

Before I save content to django model on the field that contains TinyMCE, I search for all active editors and then apply editor.save(). The textarea is not being updated by editor content. This is what I do:

$.each(tinyMCE.editors, function(index, editor){
    editor.save();
});

NOTE: I never had to do this with django-tinymce4-lite. I did in this case since I saw textarea was not getting updated.

Could someone explain me what is going on? Thanks.

[gusarg81]

Never mind... Since I use ajax, I was doing this after sending FormData() instead of before.

But still the question is why I had to manually do this since with the another lib (django-tinymce4-lite) I didn't have to.

Thanks.

[nikolaysm]

You can also add setup option to TINYMCE_DEFAULT_CONFIG.

The below code:

setup: function (editor) {
    editor.on('change', function () {
        editor.save();
    });
}

TINYMCE_DEFAULT_CONFIG looks than like:

TINYMCE_DEFAULT_CONFIG = {
    "theme": "silver",
    ...
    ...
    "setup": "function(editor){editor.on('change', function(){editor.save();});}",
}

[gusarg81]

@nikolaysm Hi, thanks for the tip! I will test it later.

[some1ataplace]

tinymce.init({
  selector: '#id_content', // Django form field ID
  setup: function(editor) {
    editor.on('save', function() {
      tinymce.triggerSave(); // Update the textarea
    });
  },
  // Additional TinyMCE configuration options...
});

In this example, we're using the editor.on() method to listen for the save event, and then calling the tinymce.triggerSave() method to update the hidden textarea element used by Django's form field. By default, TinyMCE replaces the textarea completely when it loads, so this allows us to keep the textarea element updated with the current state of the editor.

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

// To update the textarea on editor.save()

editor.on('save', function () {
  tinymce.triggerSave();
});

In the above code, we first initialize the TinyMCE editor with the selector textarea. And then on the editor.save() event, we call the tinymce.triggerSave() method to trigger a DOM event that tells TinyMCE to update the underlying textarea with the current HTML content.

[MortenKaae]

Thanks for your suggestion, @nikolaysm. This solved my issues as well.

This solution was useful as I don't call tinymce.init directly, so I needed to be able to supply a Javascript function to the setup-option in TINYMCE_DEFAULT_CONFIG.

Initially I thought this wasn't possible as the source code (link) has a comment mentioning that "There is no way to pass a JavaScript function as an option because all options are serialized as JSON.".

I think this could easily be misinterpreted as it is possible to pass a JS-function as long as it's provided in a string. Unless I'm misunderstanding something, I think this comment should perhaps be updated as I reckon this information is helpful to others?