帶有 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");