Question

我正在使用Bootstrap在JavaScript中编写Web应用程序。它动态创建几个textareas，我想将它们转换为CKEditors。但是，只创建了一个CKEditor实例，第二个'replace'给出了“Uncaught TypeError：无法读取属性'不可选'的null”。创建它们的代码非常简单：

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

textareas与某些模板中的某些表单一起创建。

<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的类“崩溃”）。一切正常，但第二个textarea没有被替换。

还有一件事：异常发生在“替换”中，但稍后发生。这是堆栈跟踪：

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。我找到了一些东西。首先，在表单＃1之后创建表单＃2是不相关的;即使我省略了第一个表单的创建，问题仍然存在。其次，它们之间的区别在于它们在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
});

我的胡子模板是这样的：

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

我每个网页只能创建一个CKEditor

1 个答案: