Question

我有添加按钮和删除按钮，动态添加和删除tinymce textarea。它有效。我的代码的问题是每当我删除一个tinymce textarea并将其添加回来。 tinymce没有得到textarea的初始化。

指向我的代码的链接是jsfiddle

我的HTML代码

 <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>

我的javascript代码

$(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();


     });

     });

Answer 1

Tinymce根据源textarea元素的id保存所有实例的列表。您有两种选择：

删除textarea
使用tinymce.EditorManager.execCommand('mceRemoveEditor', true, $(this).parent().find('input').attr('id'));单击删除按钮时手动销毁tinymce实例并确保您永远不会有重复的ID（可能会出现当前模式）

这是针对第一个解决方案更新的your fiddle。

如何动态添加和删除tinymce

1 个答案: