php - 動的なテキストエリアの追加/削除を管理するための NicEdit HTML エディター

Question

こんにちは、動的追加テキストエリアに問題があります。

すべてのテキストエリアに niceEdit HTML エディターが必要です。ハードコードされたテキストエリアではうまく機能しますが、javaScript 動的追加機能を使用してテキストエリアを生成すると、nicEdit HTML エディターが取得されません。

ここで何が欠けているのか誰か教えてください。コメントや提案は大歓迎です。

これが私のjsfiddleです

Answer 1

一歩一歩進んでください。新しく追加されたコントロールごとに、新しい nicEditor インスタンスをインスタンス化する必要があります。

//Create the text area first and append it to DOM.
var elm = $('<TEXTAREA NAME="description[]" id="test" ></TEXTAREA><a href="#" id="remScnt">Remove</a>').appendTo(scntDiv); 

// Instantiate the nicEditor Instance on it. It will now have the reference of the element in DOM. 
new nicEditor().panelInstance(elm[0]); 

//wrap it with p
elm.wrap($('<p/>')); //You can chain it in the first step itself after appendTo(scntDiv).

デモ

追加/削除機能を備えた完全な更新:

 $(document).on('click', '#addScnt', function () {
    // Add the textarea to DOM
     var elm = $('<textarea NAME="description[]"></textarea>').appendTo(scntDiv); 
    //Get the current SIZE of textArea
     var curSize = $('textarea[name="description[]"]').length; 
    //Set the Object with the index as key and reference for removel
     editors[curSize] = new nicEditor().panelInstance(elm[0]); 
    //Create anchor Tag with rel attribute as that of the index of corresponding editor
     elm.after($('<a/>', { 
         rel: curSize,
         'class': "remScnt",
         text: "Remove",
         href: '#'
     })).next().andSelf().wrapAll($('<p/>')); //add it to DOM and wrap this and the textarea in p

 });

 $(document).on('click', '.remScnt', function (e) {
     e.preventDefault();
     //Get the textarea of the respective anchor
     var elem = $(this).prev('textarea'); 
     //get the key from rel attribute of the anchor
     var index = this.rel; 
     //Use it to get the instace and remove
     editors[index].removeInstance(elem[0]);
     //delete the property from object
     delete editors[index]; 
     //remove the element.
     $(this).closest('p').remove(); 

 });

デモ

Notelive()は廃止され、新しいバージョンでは廃止されたon()ため、動的に作成された要素のイベント デリゲートと共に使用します。.remScntまた、 ID が重複すると問題が発生し、HTML が無効になる可能性があるため、削除リンクの ID をクラスに変更します。