TinyMCE的新添加的文字區域

Question

我需要在新添加的textareas添加TinyMCE編輯器，它工作正常的第一textarea但隨後在其他的附加textareas，不適用TinyMCE。

下面是我的代碼：

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="tinymce/tinymce.min.js"></script> 
<script type="text/javascript"> 
    var nTextEditor = 3; 
    function setup(areaclass) { 
     tinyMCE.init({ 
      mode: "specific_textareas", 
      editor_selector: areaclass, 
      theme: "modern", 
      plugins: "pagebreak,layer,table,save,hr,image,link,emoticons,spellchecker,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,template", 
      theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", 
      theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", 
      theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", 
      theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", 
      theme_advanced_toolbar_location: "top", 
      theme_advanced_toolbar_align: "left", 
      theme_advanced_statusbar_location: "bottom", 
      theme_advanced_resizing: true 
     }); 
    } 
</script> 

<form method="post" action="somepage" id="myForm"> 
    <textarea name="content" style="width:100%"> 
    </textarea> 

    <a id="addmore" href="javascript:;">Add more</a> 
</form> 
<script> 

    $('#addmore').click(function() { 
     nTextEditor++; 
     //console.info("all is well"); 
     var className = "text_area_" + nTextEditor; 
     console.info(className); 
     $('#myForm').append('<textarea name="text-2-field" id="text-2-field" style="width: 485px; height: 100px;" class="' + className + '"></textarea>'); 
     setup(className); 

    }); 

</script> 

Answer 1

你textarea元素（新的）具有相同的「姓名」和「身份證」的屬性，所以他們打破任何JavaScript邏輯（ID必須是唯一的）。

$(document).ready(function() { 
    var nTextEditor = 3;  
    function addTextarea() { 
     nTextEditor++; 
     var className = "text_area_" + nTextEditor; 
     $('#myForm').append('<textarea name="text-2-field'+nTextEditor+'" id="text-2-field'+nTextEditor+'" style="width: 485px; height: 100px;" class="' + className + '"></textarea>'); 
     tinymce.init({selector:'textarea'});   
     } 
    $('#addmore').click(function() { addTextarea(); }); 
}); 

我在做的jsfiddle工作的例子給你看： JSFiddle