How to recover the functions of a cloned editor?

Question

I’m dynamically adding the summernote down in green. I’m actually cloning the ones above. Of course I’d have a problem with that otherwise it wouldn’t be programming. The functions of the added editors do not work. Would someone tell me what I should do to get around such a problem?

I’m using the code below to add it.

$(document).on('click', '.adicionar', function() {
    var content = $("#perguntas_formatadas").html();
    $("#clone_perguntas_formatadas").append(content);
    $("#clone_perguntas_formatadas .form-group").attr("data-remove", 1);
});

Answer 1

I’ve never used Summernote, but I sell basic API documentation there are the following functions to obtain the typed content (in HTML) and there is also how to define a content by inserting inside an existing Summernote, respectively:

$('#summernote').summernote('code');
$('#summernote').summernote('code', markupStr);

---

So basically:

// Inicia o primeiro Summernote:
$('div#primeiro').summernote()
   .summernote('code', '<b>Esse</b> é o <u>primeiro</u> summernote');

// Excuta quando clicar em "Copiar":
$('#copiar').on('click', function() {

  // Copia o conteúdo do primeiro Summernote:
  CodigoDoPrimeiroSummerNote = $('div#primeiro').summernote('code');
  
  // Cria outros Summernote clonados do primeiro:
  $('<x-summernote></x-summernote>').appendTo('#clones');

  $('x-summernote').last().summernote()
    .summernote('code', CodigoDoPrimeiroSummerNote);

});

<!-- Bibliotecas externas (JQuery, Bootstrap, Summernote...): --><link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script><script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/summernote.css" rel="stylesheet"><script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/summernote.js"></script>

<div id="primeiro"></div>

<button id="copiar" class="btn">Copiar</button>

<div id="clones"></div>