Creating div dynamically but tinyMce isn't getting loaded for the dynamically created div

Question

My html is

<body>
<section class="section">
<textarea id="template">
    <p style="text-align: center;">
      <img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
    </p>

    <h1 style="text-align: center;">Welcome to the TinyMCE editor demo!</h1></textarea>
</section>

  <button class="btn">Click</button>

My JS looks like this.

<script>
     $(document).ready(function(){
         var temp = `  <textarea id="template">
    <p style="text-align: center;">
      <img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
    </p>

    <h1 style="text-align: center;">Welcome to the TinyMCE editor demo!</h1>
  </textarea>`;
         $(".btn").on("click",function(){
            //  $(".section").append($("#template").html());
             $(".section").append(temp);
            //  $(".section").append(temp:String):tinymce.dom.DomQuery;
         });
     });
 </script>

My TinyMce code

    tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});

As you can see in this image. On second click the tinyMce editor isn't loading. Can someone please help me in this? Thanks!

Where in your code are you initializing tinymce? Please post the full relevant code — Islam Elshobokshy, Jan 23 '19 at 14:11

score 0 · Answer 1 · answered Jan 24 '19 at 05:35

I have found the solution for the above code :

I made a custom function which wraps the tinyMce code

function addTiny() {   
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});

}

And in the JS :

 <script>
     $(document).ready(function(){
        addTiny();
         $(".btn").on("click",function(){
                 $(".section").append("<br><textarea></textarea>");
                 addTiny();
             });
 });
 </script>

Creating div dynamically but tinyMce isn't getting loaded for the dynamically created div

1 Answers1