带有 TinyMCE 文本区域的 Ace 编辑器

Question

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

我创建了这个小提琴来显示我遇到了什么问题。

在我的小提琴中，我展示了一个 tinymce textarea、一个常规 textarea 和一个 ace 编辑器 textarea。 tinymce 和常规 textarea 共享相同的名称，它被 Ace 编辑器调用以在我键入时进行更新。 你可以看到常规的 textarea 工作得很好，但是 tinymce textarea 不是。

我相信问题可能来自 TinyMCE 正在使用iFrame并在幕后更新 textarea 的事实，但我不确定在 javascript 中调用该 iframe 的最佳方法。

Answer 1

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

小提琴分叉

代码：

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

您应该以这种方式设置 ACE 主题和模式：

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