新添加的文本区域上的 TinyMCE

Question

我需要在新添加的 textareas 上添加一个 TinyMCE 编辑器，它在第一个 textarea 上工作正常，但在其他添加的 textareas、[=11 上工作正常=] 未应用。

下面是我的代码：

<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

您的文本区域元素（新元素）具有相同的 "name" 和 "id" 属性，因此它们破坏了任何 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

新添加的文本区域上的 TinyMCE

TinyMCE on newly added textareas

html

javascript

jquery

tinymce

rich-text-editor