Search code examples
tinymcedartdart-js-interop

Observe changes in TinyMCE from Dart


According to TinyMCE API, the following JavaScript code observe changes in TinyMCE editor:

tinyMCE.init({
   ...
   setup : function(ed) {
          ed.onChange.add(function(ed, l) {
                  console.debug('Editor contents was modified. Contents: ' + l.content);
          });
   }
});

However, I'm unable to run this code from Dart using the js Library. Help is appreciated.

UPDATE: There is a problem in the JS code above. Alternatively, I found this working code in here:

var ed = new tinymce.Editor('textarea_id', { 
  init_setting_item: 1,
}, tinymce.EditorManager);

ed.on('change', function(e) {
  var content = ed.getContent();
  console.log(content);
});

ed.render();

I still need help running the code from Dart. And preferably storing its results in a Dart variable for subsequent processing.


Solution

  • Here's the same code called from Dart :

    var ed = new js.Proxy(js.context.tinymce.Editor, 'textarea_id', js.map({ 
      'init_setting_item': 1
    }), js.context.tinymce.EditorManager);
    
    js.retain(ed); // retain allows to use 'ed' in the following callback
    ed.on('change', new js.Callback.many((e) {
      var content = ed.getContent();
      window.console.log(content);
    }));
    
    ed.render();