Tinymce does not work with append

Asked

Viewed 244 times

1

When I add a direct textarea to html tinymce works, but with jquery append, so:

$(".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 doesn’t work because?

jquery html tinymce wysiwyg

2 answers

2

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

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

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

<div class="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>
<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
<div class="questoes">
</div>

  • But the append is inside a function, look how it is. (I edited the question at the top). @Dvd

1


I was able to solve 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();

});

Example of the function:

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

  • Mark your answer as sure.

  • I can’t, I can’t do it for two days. I’ve tried @Dvd

  • That’s right. So in two days you score :)

Browser other questions tagged jquery html tinymce wysiwyg

You are not signed in. Login or sign up in order to post.