javascript - 我只能为每个网页创建一个 CKEditor

Question

我正在使用 Bootstrap 用 Ja​​vaScript 编写一个 Web 应用程序。它动态创建几个文本区域，我想将它们转换为 CKEditors。但是，仅创建了 CKEditor 的一个实例，第二个“替换”给出“未捕获的类型错误:无法读取 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>

然后使用innerHTML 属性将生成的HTML 插入到某个区域。我忘了提到该区域是可折叠的(即具有 Bootstrap 的“折叠”类)。一切正常，除了第二个文本区域没有被替换。

还有一件事:异常不是发生在“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 实例，但我使用的是 CKEditor 的 Jquery 适配器，它位于适配器文件夹的 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
});

我的 mustache 模板是这样的:

<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();