Я могу создать только один CKEditor для каждой веб-страницы

Question

Я пишу веб-приложение в JavaScript, используя Bootstrap. Он динамически создает несколько текстовых полей, и я хочу преобразовать их в CKEditors. Однако создается только один экземпляр CKEditor, второй «replace» дает «Uncaught TypeError: Невозможно прочитать свойство« unselectable »of null». Код, который создает их очень просто:

var editor = CKEDITOR.replace(id); 
 
editor.on('change', function (evt) { 
 
    element.value = editor.getData(); 
 
});

В прокручиваемых созданы вместе с некоторыми формами от некоторых шаблонов.

<form class="form-horizontal" method="POST" id="[%id%]-form" name="[%id%]-form"> 
 
    <div class="form-group"> 
 
    <label for="[%id%]-input-name" class="col-md-2 control-label">Name:</label> 
 
    <div class="col-md-4"> 
 
     <input type="text" size="30" class="form-control" id="[%id%]-input-name" name="projectname" readonly="readonly" value="[%state.defined.projectname%]"/> 
 
    </div> 
 
    <label for="[%id%]-input-name" class="col-md-2 control-label">Version:</label> 
 
    <div class="col-md-4"> 
 
     <input type="text" size="30" class="form-control" id="[%id%]-input-version" name="version" readonly="readonly" value="[%state.defined.version%]"/> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="[%id%]-input-title" class="col-md-2 control-label">Title:</label> 
 
    <div class="col-md-10"> 
 
     <input type="text" required="required" class="form-control" id="[%id%]-input-title" name="projecttitle" placeholder="Project title" value="[%state.defined.title%]"/> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="[%id%]-input-desc" class="col-md-2 control-label">Description:</label> 
 
    <div class="col-md-10"> 
 
     <textarea rows="3" class="form-control" id="[%id%]-input-desc" name="description" placeholder="Project description"> 
 
     [%state.defined.description%] 
 
     </textarea> 
 
    </div> 
 
    </div> 
 
. . .

и

<form class="form-horizontal" method="POST" id="[%id%]-form" name="[%id%]-form"> 
 
    <div class="form-group"> 
 
    <label for="[%id%]-input-title" class="col-md-2 control-label">Topic:</label> 
 
    <div class="col-md-10"> 
 
     <input type="text" required="required" class="form-control" id="[%id%]-input-title" name="title" placeholder="Thread title"/> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="[%id%]-input-text" class="col-md-2 control-label">Text:</label> 
 
    <div class="col-md-10"> 
 
     <textarea rows="3" class="form-control" id="[%id%]-input-text" name="text" placeholder="Text to post"> 
 
     </textarea> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="col-md-3"> 
 
     <input type="hidden" name="forumid" value="[%state.forumid%]"/> 
 
     <input type="submit" class="btn btn-primary" id="[%id%]-post" value="Post"/> 
 
    </div> 
 
    </div> 
 
</form>

Сгенерированный HTML затем вставляется в некоторой области, используя innerHTML собственность. Я забыл упомянуть, что область разборчива (т. Е. Имеет класс Bootstrap «collapse»). Все работает нормально, за исключением того, что второе текстовое поле не заменяется.

Еще одна вещь: исключение происходит не в 'replace', а чуть позже. Вот тактика стека:

b (ckeditor.js:326) 
(anonymous function) (ckeditor.js:322) 
j (ckeditor.js:10) 
CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js:12) 
CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13) 
CKEDITOR.event.CKEDITOR.event.fireOnce (ckeditor.js:12) 
CKEDITOR.editor.CKEDITOR.editor.fireOnce (ckeditor.js:13) 
(anonymous function) (ckeditor.js:246) 
CKEDITOR.scriptLoader.load.g (ckeditor.js:226) 
CKEDITOR.scriptLoader.load (ckeditor.js:226) 
(anonymous function) (ckeditor.js:245) 
(anonymous function) (ckeditor.js:233) 
(anonymous function) (ckeditor.js:231) 
CKEDITOR.scriptLoader.load.g (ckeditor.js:226) 
CKEDITOR.scriptLoader.load (ckeditor.js:226) 
CKEDITOR.resourceManager.load (ckeditor.js:231) 
h (ckeditor.js:232) 
(anonymous function) (ckeditor.js:233) 
g (ckeditor.js:244) 
(anonymous function) (ckeditor.js:243) 
(anonymous function) (ckeditor.js:468) 
(anonymous function) (ckeditor.js:231) 
CKEDITOR.scriptLoader.load.g (ckeditor.js:226) 
CKEDITOR.scriptLoader.load.B (ckeditor.js:226) 
CKEDITOR.scriptLoader.load.s (ckeditor.js:226) 
(anonymous function) (ckeditor.js:227) 

Что я делаю неправильно?

PS. Я нашел несколько вещей. Во-первых, не имеет значения, что форма №2 создается после формы №1; даже если я опускаю создание первой формы, проблема все еще существует. Во-вторых, разница между ними заключается в том, как они расположены в DOM; вторая форма имеет более глубокое гнездование, она находится внутри нескольких вложенных div. Когда я размещаю его на верхнем уровне, он работает. Мой вопрос: существует ли ограничение на количество уровней вложенности, где CKEditor может быть создан? До сих пор я не видел никаких компонентов, у которых есть проблема с этим.

Answer 1

Я также создаю динамические экземпляры CKEditor, но я использую адаптер JQuery CKEditor, он находится внутри папки CKEditor в папке адаптеров.

Мой код выглядит так:

var data = { id: 'some-random-id' , content: '<p>Initial Text Content</p>'}; 

var $element = $('#'+data.id); 
    $element.on('blur', function(){ 
    data.content = CKEDITOR.instances[data.id].getData();   
} 

//Create CKEditor instance 
$element.ckeditor(function() { 
    //Some Stuffs that my code does when ckeditor is created 
}); 

Мой шаблон усов, как это:

<script id="txt" type="text/html"> 
    <div id="{{id}}" contenteditable="true" > 
     {{& content}} 
    </div> 
</script> 

нормальный HTML Шоуда быть так:

<div id="some-random-id" contenteditable="true" > 
    <p>Initial text content</p> 
</div> 

Чтобы удалить его из странице, вы должны уничтожить ckeditor destroy.

CKEDITOR.instances[data.id].destroy();