There is a code that adds / deletes input with the CKEditor editor:

 $("#add").click(function(e) { $("#items").append('<div><input name="content[]" type="text" class="form-control ckeditor"/><button id="delete" type="button" class="btn btn-danger">Удалить</button></div>'); }) .on('click', function() { CKEDITOR.replace('content[]'); }); $("body").on("click", "#delete", function(e) { $(this).parent("div").remove(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.ckeditor.com/4.7.0/standard/ckeditor.js"></script> <div><button id="add" type="button" class="btn btn-success">Добавить поле</button></div> <div id="items"> </div>

The problem is that CKEDITOR.replace() triggered by the name identifier, i.e. when I try to add another input with the editor, I get the error Uncaught The editor instance "content[]" is already attached to the provided element.
How to use this feature

 .on('click', function () { CKEDITOR.replace('content[]'); })

to each new input ?
I tried to use the replaceAll method , the editor does not load at all.

  • one
    You give the option in question? so try it yourself - Raz Galstyan
  • one
    Can you give working code here with Ckeditor ? - Raz Galstyan
  • one
    so that the work here, though not the right one, is seen - Raz Galstyan
  • one
    thanks now I'll see - Raz Galstyan
  • one
    The second time when you click on Добавить поле do you want to get a second editor after the first? I understood correctly? or just clean the first one? - Raz Galstyan

1 answer 1

As I understand it, ckeditor does not support input array ([]) .

For this I can offer this option:

 $(document).ready(function(){ var i=1; $("#add").click(function(e) { //Append a new row of code to the "#items" div $("#items").append('<div><input name="content'+i+'" type="text" class="form-control ckeditor"/><button id="delete" type="button" class="btn btn-danger">Удалить</button></div>'); }) .on('click', function() { CKEDITOR.replace('content'+i); i++; }); $("body").on("click", "#delete", function(e) { $(this).parent("div").remove(); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.ckeditor.com/4.7.0/standard/ckeditor.js"></script> <div><button id="add" type="button" class="btn btn-success">Добавить поле</button></div> <div id="items"> </div>

Dynamically add to the name of each input number.