Tinymce does not work with append

Question

Tinymce does not work with append

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

When I add a textarea directive in the html the tinymce works, but with the append of jquery, like this:

$(".nova_questao").click(function(){

      $(".questoes").append(
            '<div class="questao">'+
            '<h4 class="h5">1. Cod: </h4>' +
            '<div class="questao-body">' +
            '<textarea name="enunciado" class="texto" data-id="">Enunciado da questão</textarea>' +
            '<div class="line"></div>' +
            '<h4 class="h5">Alternativas da questão: </h4>' +
            '</div>' +
            '</div>'
      );
});

It does not work, because?

html jquery wysiwyg tinymce

asked by anonymous 04.11.2017 / 15:31

2 answers

2

It works normally. Your problem should be in how you are doing this append .

See below the structure of how to append . It must be done after the element that will receive textarea :

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc='https://cloud.tinymce.com/stable/tinymce.min.js'></script></head><body><divclass="questoes"></div>

<script>

tinymce.init({
    selector: '.texto'
});
$(".questoes").append('<textarea name="enunciado" class="texto" data-id="">Enunciado da questão</textarea>');

</script>
</body>
</html>

tinymce.init({
	selector: '.texto'
});
$(".questoes").append('<textarea name="enunciado" class="texto" data-id="">Enunciado da questão</textarea>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc='https://cloud.tinymce.com/stable/tinymce.min.js'></script><divclass="questoes">
</div>

04.11.2017 / 16:14

How do you know if the last character of a string ends with the letter "a" or "o"? Date html with jquery

score 1 · Accepted Answer

I can solve this by creating a function containing "tinymce.init" and every time I add a textarea, I use the function to load the editor:

$(".nova_questao").click(function(){

  $(".questoes").append(
        '<div class="questao">'+
        '<h4 class="h5">1. Cod: </h4>' +
        '<div class="questao-body">' +
        '<textarea name="enunciado" class="texto" data-id="">Enunciado da questão</textarea>' +
        '<div class="line"></div>' +
        '<h4 class="h5">Alternativas da questão: </h4>' +
        '</div>' +
        '</div>'
  );

  //Função que carrega o init do Tinymce
  loadTinymce();

});

Function example:

function loadTinymce() {
    tinymce.init({
        selector: '.texto'
    });
}