添加TinyMCE的编辑器脚本jquery的动态

-1

<html> 
<head> 
<title>jQuery add/remove textbox example</title> 

<script type="text/javascript" src="jquery-1.10.2.min.js"></script> 

<style type="text/css"> 
    div{ 
     padding:8px; 
    } 
</style> 

</head> 

<body> 

<h1>jQuery add/remove textbox example</h1> 


<script type="text/javascript" src="tinymce\tinymce.min.js"></script> 
<script type="text/javascript"> 

tinymce.init({ 
     selector: "textarea", 
     force_p_newlines : false, 


     plugins: [ 
       "advlist autolink autosave image link lists charmap print preview hr anchor pagebreak spellchecker", 
       "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", 
       "table contextmenu directionality emoticons template textcolor paste fullpage textcolor" 
     ], 

     toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect | cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media | inserttime preview ", 
     toolbar2: "forecolor backcolor | table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft ", 

     image_advtab: true, 
     menubar: false, 
     toolbar_items_size: 'small', 

     style_formats: [ 
       {title: 'Bold text', inline: 'b'}, 
       {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}, 
       {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}, 
       {title: 'Example 1', inline: 'span', classes: 'example1'}, 
       {title: 'Example 2', inline: 'span', classes: 'example2'}, 
       {title: 'Table styles'}, 
       {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'} 
     ], 

     templates: [ 
       {title: 'Test template 1', content: 'Test 1'}, 
       {title: 'Test template 2', content: 'Test 2'} 
     ] 

}); 
</script> 


<script type="text/javascript"> 

$(document).ready(function(){ 

    var counter = 2; 

    $("#addButton").click(function() { 

    if(counter>4){ 
      alert("Only 4 textboxes allow"); 
      return false; 
    } 

    var newTextBoxDiv = $(document.createElement('div')) 
     .attr("id", 'TextBoxDiv' + counter); 

    newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' + 
      '<textarea name="textbox' + counter + 
      '" id="textbox' + counter + '" value="" />'); 

    newTextBoxDiv.appendTo("#TextBoxesGroup"); 


    counter++; 
    }); 

    $("#removeButton").click(function() { 
    if(counter==1){ 
      alert("No more textbox to remove"); 
      return false; 
     } 

    counter--; 

     $("#TextBoxDiv" + counter).remove(); 

    }); 

    $("#getButtonValue").click(function() { 

    var msg = ''; 
    for(i=1; i<counter; i++){ 
     msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val(); 
    } 
      alert(msg); 
    }); 
    }); 
</script> 
</head><body> 

<div id='TextBoxesGroup'> 
    <div id="TextBoxDiv1"> 
     <label>Textbox #1 : </label><textarea id='textbox1' ></textarea> 
    </div> 
</div> 
<input type='button' value='Add Button' id='addButton'/> 
<input type='button' value='Remove Button' id='removeButton'/> 
<input type='button' value='Get TextBox Value' id='getButtonValue'/> 

</body> 
</html>

，这是输出。正如你所看到的，我只是第一次得到tinymce编辑器，也就是当我重新加载页面，但是当我说添加新的时候，我只是得到一个纯文本编辑器。我需要在jquery中添加tinymce脚本，但我应该在哪里以及如何添加它？

来源

2013-12-12 Santino ' Sonny' Corleone

可能重复[首页动态添加TinyMCE的编辑器显示，有些不] （http://stackoverflow.com/questions/18538591/first-dynamically-added-tinymce-editor-displays-others-do-not） – Loktar

我不认为这是一个duplicate.its不同于另一个 –

@Loktar它似乎没有重复。删除标志 – 2013-12-12 05:28:56