TinyMCE does not continuously save textarea

[rvanlaak]

Because TinyMCE only reads the DOM on load, GarlicJS does not keep track of the active state.

http://archive.tinymce.com/wiki.php/TinyMCE3x:TinyMCE_FAQ#TinyMCE_does_not_update_the_content_when_I_set_a_new_text_in_textarea_by_JavaScript

We tried to workaround this by forcing a save after every change, but this also doesn't seem to write the <textarea>: http://stackoverflow.com/a/24284938/1794894

Editing the textarea without TinyMCE does work really nice, but the documentation doesn't explain me how to solve this case. How can TinyMCE and GarlicJS cooperate nicely?

[micschk]

@rvanlaak, As a quick fix, you can add this to your tinymce init as option:

            setup : function(editor) {
                editor.on("change keyup", function(e){
                    console.log('saving');
                    //tinyMCE.triggerSave(); // updates all instances
                    editor.save(); // updates this instance's textarea
                    $(editor.getElement()).trigger('change'); // for garlic to detect change
                });
            }

If you want to use the conflictmanager as well, you need to make tinymce to pick up the swapped value by calling load():

    $('form').garlic();
    // trigger load for the editor to pick up (this luckily gets executed AFTER garlic's swap)
    $(".thesource textarea + .garlic-swap").on('click',function(){
        var tiny_instance = $(this).prev().data('tinymceinstance');
        tinyMCE.get(tiny_instance).load();
    });

The argument for tinyMCE.get is usually the ID of the textarea it was inited on. Optionally, you can add the editor-id to the textarea on TinyMCE init for reference (in tinyMCE.init, setup option):

    ...
    setup : function(editor) {
                $(editor.getElement()).data('tinymceinstance',editor.id);

[alopez25]

@micschk @rvanlaak Michael, Richard thanks for posting a potential solution. I tried it, however, and Garlic still not saving the changes. I wonder if you could point me to the possible issue. I'm using the code exactly as you posted in the tinymce init as below.

Would really appreciate your help.

    <script>
      tinyMCE.init({
        selector: 'textarea.tinymce',
        setup : function(editor) {
          editor.on("change keyup", function(e){
            console.log('saving');
            tinyMCE.triggerSave(); // updates all instances
            // editor.save(); // updates this instance's textarea
            $(editor.getElement()).trigger('change'); // for garlic to detect change
          });
        }
      });
    </script>