4

我正在尝试创建一个动态表单，您可以在其中添加新的“章节”，点击最多 10 个按钮。这会很“容易”，但我也希望文本字段能够实现 CKEditor，但我无法让它工作。我很顺利地添加了章节，我只能编辑它们的最后一个实例。此外，如果我编辑最后一个并单击“添加新章节”，最后一个将被删除。我的尝试基于这个线程。

到目前为止我得到的 Javascript 代码：

num_chapter = 1;
var editor = new Array();

function createEditor()
  {
  if (num_chapter <= 10)
    {
    var num=num_chapter+1;
    document.getElementById('editor').innerHTML += "<br><br><h3 style='display:inline'>Chapter " + num + ": </h3><input style='display:inline' type='text' name='titlechapter_" + num + "' placeholder='Title for chapter " + num + "'><br><br>";    

    // Create a new editor inside the <div id="editor">, setting its value to html
    var config = {};
    editor[num_chapter] = CKEDITOR.appendTo( 'editor' , config, '' );
    }
  else
    {
    document.getElementById('chapters').innerHTML += "<br />Maximum is 10 chapters.";
    }
  num_chapter += 1;
  }

HTML 代码：

<h3 style='display:inline'>Chapter 1: </h3> <input style='display:inline' type="text" name="titlechapter_1" placeholder="Title chapter 1"><br><br>
<textarea class="ckeditor" onChange="editing('Chapter 1');" name="chapter_1"></textarea>
  <div id="editor">
  </div><br>
  <input type="button" onclick="createEditor(); editing('Chapter 1');" value=" Add chapter ">

如您所见，我试图将编辑器对象放入一个数组中，但没有成功。我不太懂 Javascript（不是说几乎什么都没有），所以任何帮助将不胜感激！

4

3 回答 3

4

我终于解决了，总共花了 3 到 4 个小时。这比我想象的要容易，但并不那么优雅。这可以通过 php 和 javascript 来实现，使其“稍微”更优雅，但如果您的文本字段很少，只需简单的旧 html 和 Javascript 也可以解决问题。

首先，HTML/PHP：

<h3 style='display:inline'>Chapter 1: </h3> 
  <input style='display:inline' type="text" name="titlechapter_1" placeholder="Title chapter 1"><br><br>
  <textarea class="ckeditor" onChange="editing('Chapter 1');" name="chapter_1"></textarea>
  <?php for ($i=2; $i<=10; $i++)
    echo "<div id='div_editor_".$i."' style='display:none;'><textarea id='editor_".$i."' name='editor".$i."'></textarea></div>"; ?>
  <br><br>
  <input type="button" onclick="createEditor();" value=" Add chapter ">
<br><br>

意识到它创建了所有的 div，但由于其中没有任何内容，因此它们不会出现。然后，Javascript：

num_chapter = 2;
var editor = new Array();

function createEditor()
  {
  if (num_chapter <= 10)
    {
    toggle_visibility('div_editor_' + num_chapter );

    document.getElementById('div_editor_' + num_chapter).insertAdjacentHTML( "afterbegin", "<br><br><h3 style='display:inline'>Chapter " + num_chapter + ": </h3><input style='display:inline' type='text' name='titlechapter_" + num_chapter + "' placeholder='Title for chapter " + num_chapter + "'><br><br>");

    // Create a new editor inside the <div id="editor">, setting its value to html
    CKEDITOR.replace( 'editor_' + num_chapter );

    num_chapter += 1;
    }
  else
    {
    alert("Sorry, maximum is 10 chapters.");
    }
  }

这段代码将生成 10 章与 CKeditor 一起正常工作的章节。如果尝试创建第 11 个，则会在弹出窗口中显示警告。重要的是这条线for ($i=1; $i<10; $i++)、这条线num_chapter < 10和这条线num_chapter == 10都具有相同的值（在我的例子中是 10）。

于 2012-10-08T12:52:09.210 回答
1

经过一番反复试验，我终于找到了解决这个问题的方法。

这是为了回答可能像我一样出现在这里的搜索，寻找“如何动态创建 ckeditor 实例”。

诀窍是除了 ckeditor.js 库之外，还要在 html 脚本中包含 CKEDITOR 中包含的适配器库

ckeditor/adapters/jquery.js

并在您的 javascript 中初始化这些元素

 var elem = $(this).find('.your_selector')
 elem.ckeditor()

（确保 .your_selector 是 textarea 的类，它将被转换为 ckeditor 实例）

希望这对可能仍在寻找此线程的人有所帮助。

于 2016-10-03T01:46:02.263 回答
0

将CKEditor 4动态附加到创建 CKEditor 的多个实例的元素

Javascript

function createNewEditor(targetElement) {
  var element = document.createElement("textarea");
  $(element)
    .addClass(".ckeditor")
    .appendTo(targetElement);
  return CKEDITOR.replace(element);
}

$(document).ready(function() {
  $(".ckeditor").each(function(_, ckeditor) {
    CKEDITOR.replace(ckeditor);
  });

  $(".chapter-video").each(function(_, chapterVideo) {
    var chapterVideoInput = $(chapterVideo).find(".file-input");
    var chapterFileUploadName = $(chapterVideo).find(".upload-file-name");
    $(chapterVideoInput).on("change", function(e) {
      var filesLength = e.target.files.length;
      if (filesLength) {
        $(chapterFileUploadName)
          .find("span")
          .text(e.target.files[0].name);
      }
    });
  });
  $(".add-chapter-para").each(function(_, addParaBtn) {
    var addTo = $(addParaBtn).data("add-to");
    $(addParaBtn).on("click", function() {
      createNewEditor(addTo);
    });
  });
});

HTML

<div class="container">
  <form action="#">
    <div class="" id="main-container">
      <div class="editor">
        <textarea class="ckeditor" name="chapterContent[]"></textarea>
      </div>
    </div>
    <div class="my-2">
      <button class="btn btn-primary">Submit</button>
    </div>
  </form>
</div>

<hr />
<button
  class="btn btn-danger add-chapter-para"
  data-add-to="#main-container"
  type="button"
>
  Add Paragraph
</button>

Button Element 有一个data-attribute我们想要添加 ckeditor 的元素。

工作 Codepen 链接

于 2020-01-27T09:34:41.633 回答