Question

我正在尝试扩展一个＆＃34;代码视图＆＃34;和设计视图＆＃34;在我的应用程序内。我可以使用代码视图（Ace Editor）或设计视图（tinymce），没有任何问题。但是我希望这两个人一起工作并在开发时更新任何一方的代码。这将使我只需要POST一个标签，而不是两个，可能会遇到问题。

我创建了这个fiddle以显示我遇到了什么问题。

在我的小提琴中，我展示了一个简单的textarea，一个普通的textarea和一个ace编辑textarea。 tinymce和常规textarea具有相同的名称，并且当我打字时，Ace编辑器会调用它来更新。你可以看到常规textarea完美的工作，但tinymce textarea不是。

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

Answer 1

我尝试同步两者，但由于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'})
            );
        });
    }

});

Answer 2

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

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

使用TinyMCE textarea进行Ace编辑

2 个答案: