Dynamically add text fields using CKEditor

Question

I am trying to create a dynamic form where you can add new “chapters” by clicking the button for up to 10 of them. That would be “easy”, but I also want the text fields to execute CKEditor, and I can't get it to work. I got it smooth smoothly, I can only edit their instance of LAST. In addition, if I edit the latter and click "add new chapter", the latter will be deleted. I based my attempt on this thread .

Javascript Code I still have:

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 tried to put the editor objects in an array, but that didn't work. I don't know much Javascript (say almost nothing), so any help would be appreciated!

Answer 1

I finally decided that after 3 or 4 hours. It was easier than I thought, but not so elegant. This can be achieved with php and javascript to make it a bit more elegant, but plain old html and Javascript will also do the trick if you have few text fields.

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

Understand that it creates all divs, but since there is nothing in them, they do not appear. Then, 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 that work correctly with CKeditor. If the 11th attempt was created, a warning is displayed in a pop-up window. it is important that this string for ($i=1; $i<10; $i++) , this num_chapter < 10 and this num_chapter == 10 all have the same value (10 in my case).

Answer 2

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

This is the answer to searches that may land here, like me, searching for "how to dynamically instantiate ckeditor".

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

(Make sure .your_selector is the text field class to be converted to a ckeditor instance)

Hope this helps people who can still find this topic.