Ace Editor with TinyMCE textarea

Question

I am trying to extend a "code view" and a "design view" within an application of mine. I am able to use either the code view (Ace Editor) or the design view (tinymce) with no issues. However I would want the two to work together and update the code on either side when developing. This would make me only have to POST one tag rather than doing two and may have issues down the road.

I created this fiddle to show what problem I am having.

In my fiddle I show a tinymce textarea, a regular textarea and a ace editor textarea. The tinymce and regular textarea share the same name and it's being called by Ace editor to update as I am typing. You can see the regular textarea works perfectly however, the tinymce textarea is not.

I believe the issue may be coming from the fact that TinyMCE is using an iFrame and updating the textarea behind the scenes but I am not exactly sure the best way to call that iframe in javascript.

Answer 1

I've tried to sync both, but due to some missing callbacks/events on tinyMCE, this is best I get. The content in ACE is only updating after blur on tinyMCE. There's currently no direct input event:

Fiddle forked

Code:

var editor = ace.edit("edit");
var textarea = $('textarea[name="test"]');
editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
    textarea.val(editor.getSession().getValue());

    // copy ace to tinyMCE
    tinymce.get('test').setContent(editor.getSession().getValue());

});
editor.setTheme("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/theme-terminal.js");
editor.getSession().setMode("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/mode-html.js");

tinymce.init({
    selector: ".test",
    relative_urls: false,
    apply_source_formatting : true,

    setup : function(ed) {
        ed.on('change', function(e) {
              // copy tinyMCE to textarea
              textarea.val(tinymce.activeEditor.getContent({format : 'raw'}));

             // copy tinyMCE to ace
            editor.getSession().setValue(
                tinymce.activeEditor.getContent({format : 'raw'})
            );
        });
    }

});

Answer 2

You should be setting ACE theme and mode this way:

editor.setTheme("ace/theme/terminal");
editor.getSession().setMode("ace/mode/html");