Multiples Ckeditor on the same page

Question

I am creating a system in which the user can put as many textarea as he wants, the system is already ready. The code to do this is this:

function addPergunta(){
    pergunta++;
    var corpo = "<div id='pergunta-" + pergunta + "'><hr><h3>Pergunta " + pergunta + "</h3><textarea id='textEditor' class='textarea-pergunta' placeholder='Escreva a pergunta...'' name='pergunta-" + pergunta + "' required></textarea><div id='itens-" + pergunta + "'><div id='item-" + pergunta + "-1' style='display: inline'>1. <input type='text' class='item-pergunta' name='item-" + pergunta  + "-1' placeholder='Escreva a alternativa para essa pergunta' required></div></div><button type='button' class='add-item' onclick='addItem(" + pergunta + ")' data-toggle='tooltip' title='Adicionar ítem à questão' id='addItem-" + pergunta + "'><span class='fa fa-plus'></span></button><button type='button' class='add-item' onclick='removerItem(" + pergunta + ")' data-toggle='tooltip' title='Remover um ítem!' id='removerItem-1'><span class='fa fa-close'></span></button><input type='text' class='resposta' placeholder='Insira a resposta certa para essa questão' name='resposta-" + pergunta+ "' required></div>";
    var areaPerguntas = document.getElementById('perguntas');
    areaPerguntas.insertAdjacentHTML('beforeend', corpo);
    itens[pergunta] = 1;
    return;
}

What matters is that I create this textarea with normal javascript and tals. But I wanted to put this textarea as a text editor, I already use Ckeditor a little while and I like it a lot, but what happens is that I can’t load it when I do this DOM, it loads only once when it loads the page. If someone has any method of loading it every time they add a new textarea.

OBS.: It does not have the id corresponding to the Ckeditor in this code, is why I took it while not solving this problem. And I’ve also tried to load the Ckeditor into that function, but it doesn’t load.

Thank you in advance!

Answer 1

You have to give a unique ID to each textarea. For example 'textEditor-pergunta-' + pergunta to follow your logic.

You can do it like this:

 CKEDITOR.replace('textEditor-pergunta-' + pergunta);

at the end of your job.

Example: http://jsfiddle.net/f3054qmn/3/show/