Question

我需要在新添加的TinyMCE上添加textareas编辑器，它适用于第一个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元素（新的元素）具有相同的＆＃34;名称＆＃34;和＆＃34; id＆＃34;属性，所以他们打破任何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

关于新添加的textareas的TinyMCE

1 个答案: