Ace Editor with TinyMCE textarea

我想在我的應用程序中擴展「代碼視圖」和「設計視圖」。我能夠使用代碼視圖（Ace編輯器）或設計視圖（tinymce），沒有任何問題。不過，我希望這兩個人一起工作，並在開發時更新任何一方的代碼。這將使我只需發佈一個標籤而不是做兩個標籤，並且可能會出現問題。Ace Editor with TinyMCE textarea

我創建了這個fiddle來顯示我有什麼問題。

在我的小提琴中，我展示了一個tinymce textarea，一個常規textarea和一個ace編輯器textarea。 tinymce和常規textarea共享相同的名稱，並且在我輸入時由Ace編輯器調用以更新。你可以看到常規的textarea工作正常，但tinymce textarea不是。

我認爲這個問題可能來自於TinyMCE使用iFrame並更新幕後的textarea這一事實，但我不完全確定在javascript中調用iframe的最佳方式。

來源

2015-11-03 Lynx

TinyMCE有一個代碼視圖'tinymce.init（{插件：「代碼」}）;' - 爲什麼添加ACE進混合和複雜的東西？ – staypuftman

爲了能見度目的，我將兩者分開。代碼視圖與tinymce不同的部分使用。這就是爲什麼我選擇了ace編輯器，而且它們比tinymce – Lynx

我試着同時這兩個，但由於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'}) 
      ); 
     }); 
    } 

});

來源

2015-11-05 18:34:26

中的代碼插件更具多功能性，看起來好像工作得很好！萬分感謝！ – Lynx

Ace Editor with TinyMCE textarea

回答

相關問題