NicEdit html editor for managing dynamic add/remove textareas

Question

Hi I am having problem with my dynamic add textarea,

I need to have niceEdit html editor in all my textarea, It works good on hardcoded textarea but when I use my javaScript dynamic add function to to produce textarea it does not obtain the nicEdit html editor.

could anyone tell me what I'm missing here. Any comments and suggestion is well appreciated.

here's my jsfiddle

Answer 1

Take it step by step. You need to instantiate for the new nicEditor Instance on each newly added controls.

//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

Full Update with add/remove 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

Note live() is deprecated and discontinued in newer version so use on() with event delegation for dynamically created elements. Also change id to class for the remove link .remScnt as duplicate id can cause issues and make the html invalid