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

Question

我正在尝试在我的应用程序中扩展 "code view" 和 "design view"。我可以毫无问题地使用代码视图 (Ace Editor) 或设计视图 (tinymce)。但是我希望两者一起工作并在开发时更新任何一方的代码。这将使我只需要 POST 一个标签而不是两个，并且可能会在未来遇到问题。

我创建这个 fiddle 是为了说明我遇到了什么问题。

在我的 fiddle 中，我展示了一个 tinymce 文本区域、一个常规文本区域和一个 ace 编辑器文本区域。 tinymce 和常规 textarea 共享相同的名称，Ace 编辑器会在我输入时调用它进行更新。您可以看到常规文本区域工作正常，但是 tinymce 文本区域不是。

我认为问题可能出在 TinyMCE 正在使用 iFrame 并在幕后更新文本区域，但我不确定在 [=23= 中调用该 iframe 的最佳方式].

Answer 1

我尝试同步两者，但由于在 tinyMCE 上缺少一些 callbacks/events，这是我得到的最好的。 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'})
            );
        });
    }

});

Answer 2

您应该这样设置 ACE 主题和模式：

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

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

Ace Editor with TinyMCE textarea

html

javascript

jquery

tinymce

ace-editor