NicEdit의 HTML 편집기 동적 추가를 관리/그것은 하드 코딩 된 텍스트 영역에 좋은 작품 내 모든 텍스트 영역에서 niceEdit HTML 편집기가 필요 텍스트 영역을 내 동적 추가 텍스트 영역에 문제가 오전

Question

안녕,

을 제거하지만, 내 JavaScript 동적 기능을 추가하여 nicEdit HTML 편집기를 얻지 못하는 textarea를 생성합니다.

누구나 내가 여기에서 무엇을 놓치고 있는지 말해 줄 수 있습니다. 모든 의견 및 제안은 높이 평가됩니다.

여기 내 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). 

Demo

추가로

전체 업데이트/제거 functionlity :

$(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(); 

}); 

Demo

주 live() 그렇게 on() 위스콘신을 사용하는 최신 버전에서 사용되지 않고 중단 동적으로 생성 된 요소에 대한 이벤트 위임. 또한 id를 클래스로 변경하면 중복 제거 ID가 .remScnt으로 변경되어 문제가 발생할 수 있으며 html이 유효하지 않게됩니다.