onShow事件后在CKEditor对话框中替换元素

我尝试为CKEditor编写自己的插件。目标是点击工具栏中的一个按钮，打开一个对话框。在对话框中有一个textArea元素应该被一个CodeMirror实例替换。onShow事件后在CKEditor对话框中替换元素

我到目前为止，对话框打开，我可以抓住textArea并将其替换。但它看起来很糟糕，没有功能。而且在控制台中没有错误。

我想不通为什么不起作用。

plugin.js是打我的插件按钮时启动

CKEDITOR.plugins.add('abbr', { 
    icons: 'abbr', 
    init: function(editor) { 
     editor.addCommand('abbr',new CKEDITOR.dialogCommand('abbrDialog')); 

     // Create a toolbar button that executes the plugin command. 
     editor.ui.addButton('Abbr', { 
      label: 'Insert SourceCode', 
      command: 'abbr', 
      toolbar: 'insert' 
     }); 

     CKEDITOR.dialog.add('abbrDialog', function (editor) { 
      return { 
       title : 'Insert SourceCode', 
       minWidth : 700, 
       minHeight : 300, 
       contents : [{ 
         id : 'tab1', 
         label : 'label1', 
         elements : 
         [{ 
          type : 'html', 
          html: '<textarea id="codeEditor"></textarea>', 
          id : 'codeEditor', 
          label : 'CodeEditor', 
         }] 
       }], 
       onShow : replacaByCodeMirror, 
       onOk : saveActionFunc 
      }; 
     }); 
    } 
}); 

function replacaByCodeMirror() { 
    var codeEditor = CodeMirror.fromTextArea(document.getElementById("codeEditor"), { 
     mode : "mixedMode", 
     theme : "default" 
    }); 
}

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"/> 
     <script src="../ckeditor.js"></script> 
     <script src="../plugins/codemirror/js/codemirror.js"></script></script> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 

     <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css"/> 
     <link rel="stylesheet" href="../plugins/codemirror/css/codemirror.css"/> 
     <link rel="stylesheet" href="../plugins/codemirror/css/myStyle.css"> 
    </head> 
    <body> 
     <form> 
      <textarea name="editor1" id="editor1" rows="10" cols="80"> 
       StartWort 
      </textarea> 
      <script> 

       var editor = CKEDITOR.replace('editor1'); 

      </script> 
     </form> 
    </body> 
</html>

截图：Dialog Screenshot

来源

2016-02-03 RavenousRat