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

回答

相关问题