javascript - 带 TinyMCE 文本区域的 Ace 编辑器

Question

我正在尝试在我的应用程序中扩展“代码 View ”和“设计 View ”。我可以毫无问题地使用代码 View (Ace Editor)或设计 View (tinymce)。不过，我希望两者能够一起工作，并在开发时更新双方的代码。这将使我只需要发布一个标签而不是发布两个标签，并且可能会出现问题。

我创建了这个fiddle显示我遇到的问题。

在我的 fiddle 中，我显示了一个tinymce文本区域、一个常规文本区域和一个ace编辑器文本区域。 tinymce 和常规文本区域共享相同的名称，并且 Ace 编辑器会在我打字时调用它来更新。您可以看到常规文本区域工作得很好，但是，tinymce 文本区域则不然。

我相信问题可能来自于 TinyMCE 使用 iFrame 并在幕后更新文本区域，但我不确定在 javascript 中调用该 iframe 的最佳方式。

Answer 1

我尝试同步两者，但由于tinyMCE上缺少一些回调/事件，这是我得到的最好的。 ACE 中的内容仅在tinyMCE 上模糊后更新。目前没有直接输入事件:

Fiddle forked

代码:

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

});