如何動態添加和刪除tinymce

我有添加按鈕和刪除按鈕，動態添加和刪除tinymce textarea。它的工作原理。我的代碼的問題是每當我刪除tinymce textarea並將其添加回來。 tinymce不會使用textarea進行初始化。如何動態添加和刪除tinymce

我的代碼的鏈接是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(); 


    }); 

    });

來源

2017-01-23 Rais

可能的重複[如何刪除tinyMCE，然後重新添加它？]（http://stackoverflow.com/questions/4651676/how-do-i-remove-tinymce-and-then-re-add - 它） – Val

請參閱實施[這裏]（http://phpflow.com/demo/add-remove-tinymce-4-demo/）請參閱 – crowchirp

TinyMCE的保持基於源textarea的ID的所有實例的列表元件。你有兩個選擇：

上textarea的刪除id屬性使用tinymce.EditorManager.execCommand('mceRemoveEditor', true, $(this).parent().find('input').attr('id'));點擊刪除按鈕時
手動銷燬TinyMCE的實例，並確保你將永遠不會有重複的標識（這可能與目前的格局發生）

這是爲第一個解決方案更新的your fiddle。

來源

2017-01-23 10:54:05

背後的代碼它在某種程度上有效。如果你添加三個textarea，並刪除第二個。它不工作，如果你添加另一個文本區 – Rais

好的錯誤。所以會發生什麼，如果你加2，刪除第二個，再加1個，第二個和thirde項目都會有id的option3。我們不能再基於這個id來銷燬。我會更新小提琴和處理這種情況的答覆，但請注意，這種重複ID是一種不好的模式。 –

最簡單的解決方案是刪除textarea上的id。我更新了回覆，並朝這個方向撥弄。否則，你將不得不找到一種方法來生成一個唯一的ID（可能是計數器或隨機）。 –

如何動態添加和刪除tinymce

回答

相關問題