0

I have add button and a remove button that dynamically add and remove tinymce textarea. And it works. The problem with my code is whenever i remove a tinymce textarea and add it back. The tinymce does not get initialize with the textarea.

A link to my code is jsfiddle

my html code

 <ol type="A" id="list">
            <li id="element1">                             
               <input type="radio" name="optionanswer" id="answer1" value="1" >

                 <textarea  class="ans" name="option1" id="option1" rows="2" cols="3">

                 </textarea>                                                                                          

            </li>
        </ol>

        <button class="btn btn-primary" type="submit" id="addalt"><span class="glyphicon glyphicon-plus"></span>  Add Alternative</button>

my javascript code

$(document).ready(function(){

// function to run tinymce
function tinym(){
tinymce.init({
             selector: 'textarea',

             menubar:false,
       statusbar: false,
        toolbar: "charmap",

              plugins: [
              ' charmap'
              ],

              content_css: [
                '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
                '//www.tinymce.com/css/codepen.min.css'
              ]
             });
}
tinym();
     $(document).on("click", "#addalt" , function() {
         event.preventDefault();
         var ul = document.getElementById("list"); 

         var li = document.createElement("li");
           var children = ul.children.length + 1
         //li.setAttribute("id", "element"+children)
         //console.log(children);
         var idname='answer'+children;
         var textid='option'+children;


         $("ol").append("<li> <input type='radio'name='optionanswer' id=" + idname + " />  <textarea  rows='2' cols='3' name=" + textid + " id=" + textid + ">  </textarea>  <a href='javascript:void(0);' class='remove'>&times;</a></li>"); 
         tinym();


     });

     $(document).on("click", "a.remove" , function() {
         $(this).parent().remove();


     });

     });
Rais
  • 11
  • 3
  • Possible duplicate of [How do i remove tinyMCE and then re-add it?](http://stackoverflow.com/questions/4651676/how-do-i-remove-tinymce-and-then-re-add-it) – Val Jan 23 '17 at 10:17
  • please see an implementation [here](http://phpflow.com/demo/add-remove-tinymce-4-demo/) see the code behind – Chandan Rai Jan 23 '17 at 10:30

1 Answers1

0

Tinymce keeps a list of all instance based on the id of the source textarea element. You have two options:

  1. Remove the id attribute on the textarea
  2. Manually destroy the tinymce instance when the remove button is clicked using tinymce.EditorManager.execCommand('mceRemoveEditor', true, $(this).parent().find('input').attr('id')); AND make sure you will never have duplicated ids (which may occur with current pattern)

Here is an your fiddle updated for first solution.

François-Xavier Aeberhard
  • 632
  • 8
  • 13
  • it works to some extend. if u add three textarea and u remove the second one. it does not work if u add another textarea – Rais Jan 23 '17 at 11:51
  • Nice bug. So what happens is if you add 2, remove the second and add 1 more, both second and thirde item will have option3 for id. We cannot destroy based on this id anymore. I will updated the fiddle and the reply to handle this case, but be aware having this kind of duplicate ids is a bad pattern. – François-Xavier Aeberhard Jan 23 '17 at 12:27
  • Easiest solution is to remove id on textarea. I updated reply and fiddle in this direction. Otherwise, you will have to find a way to generate an id that is unique (maybe counter or random). – François-Xavier Aeberhard Jan 23 '17 at 12:44