Заменить элемент в диалоговом окне CKEditor после события onShow

Я пытаюсь написать собственный плагин для CKEditor. Цель состоит в том, чтобы щелкнуть кнопку на панели инструментов, которая открывает диалог. В диалоговом окне есть элемент textArea, который должен быть заменен экземпляром CodeMirror.Заменить элемент в диалоговом окне CKEditor после события onShow

Я пришел так далеко, что открывается диалоговое окно, и я могу захватить 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

Вы не можете запустить яваскрипт кода внутри окна CKEditor (или в пределах диалоговое окно ckeditor). Работа вокруг заключается в использовании iframe внутри диалогового окна (есть плагин iframedialog, который вы должны добавить).

источник

2016-02-03 16:04:33

Это была именно информация, в которой я нуждался. Большое спасибо! Я бы дал вам голосование, но у меня есть только 2 репутата.

К сожалению, почти нет хорошего примера для поиска в Интернете. Это помогло мне в этом: CKForum

источник

2016-02-04 09:29:13 RavenousRat

Заменить элемент в диалоговом окне CKEditor после события onShow

ответ

Смежные вопросы