javascript - Dynamically add textareas with CKEditor - Stack Overflow

admin管理员组

文章数量:1291114

I am trying to create a dynamical form where you can add new 'chapters' clicking to a button up to 10 of them. This would be 'easy', but I also want the text fields to be implementing CKEditor, and I cannot make it work. I got it adding the chapters smoothly, I can only edit the LAST instance of them. Besides, if I edit the last one and click on 'add new chapter', the last one gets deleted. I based my attempt in this thread.

Javascript code I got so far:

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 code:

<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 ">

As you can see, I attempted to put the editors objects into an array, but it didn't work out. I don't know much Javascript (not to say almost nothing), so any help will be appreciated!

I am trying to create a dynamical form where you can add new 'chapters' clicking to a button up to 10 of them. This would be 'easy', but I also want the text fields to be implementing CKEditor, and I cannot make it work. I got it adding the chapters smoothly, I can only edit the LAST instance of them. Besides, if I edit the last one and click on 'add new chapter', the last one gets deleted. I based my attempt in this thread.

Javascript code I got so far:

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 code:

<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 ">

As you can see, I attempted to put the editors objects into an array, but it didn't work out. I don't know much Javascript (not to say almost nothing), so any help will be appreciated!

• javascript
• ckeditor
• dynamically-generated

Share Improve this question Follow edited Dec 20, 2014 at 16:34 Francisco Presencia asked Oct 8, 2012 at 11:53 Francisco PresenciaFrancisco Presencia 8,85877 gold badges4949 silver badges9494 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I finally solved it, after 3 or 4 hours in total. It was easier than I thought, but not so elegant. This can be achieved through php and javascript to make it 'slightly' more elegant, but just plain old html and Javascript will also do the trick if you have few text fields.

First, the 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>

Realize that it creates all the div, but since there's nothing in them, they don't appear. Then, the 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.");
    }
  }

This code will generate 10 chapters properly working with CKeditor. If the 11th is attempted to be created, a warning in a popup is shown. it's important that this line for ($i=1; $i<10; $i++), this num_chapter < 10 and this num_chapter == 10 have all the same value (10 in my case).

After some trial and error, I finally found the solution to this problem.

This is to answer searches that may land here as I did, looking for 'how to dynamically create ckeditor instances'.

The trick is to include the adapter library included in CKEDITOR in your html script in addition to the ckeditor.js library

ckeditor/adapters/jquery.js

And initialize these elements in your javascript

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

(Making sure .your_selector is the class of a textarea which will be converted to a ckeditor instance)

Hope this helps people who may still be finding this thread.

Appending CKEditor 4 Dynamically to the Element creating multiple instances of the 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 is having a data-attribute to which element we want to append the ckeditor.

Working Codepen Link

本文标签： javascriptDynamically add textareas with CKEditorStack Overflow