Dynamically add WYMEditors

[ionutvalean]

Hi,
I am pretty new to JavaScript and JQuery and I want to integrate the WYMEditor in a page. I want to do this dynamically by giving the user the possibility of having more then one WYMEditor or none. I am trying to do this like so:
I have a snippet that I will always clone and only change it's text property.

The snippet declaration

Code: Select all

<div id="wymEditorSnippet" class="WymEditorBlock" style="WIDTH:100%">
   <textarea id="wymEditor" class="wymeditor"></textarea>
</div>


The Add function

Code: Select all

function AddWymEditorBlock(structure){
   var snippet = $("#wymEditorSnippet").clone();
        snippet.find("#wymEditor").val(structure.html);
   return snippet;
}


The problem is that when the page is loaded, the JavaScript that replaces all objects that has [class="wymeditor"] with the WYMEditor controls. When I clone the snippet, I clone the entire WYMEditor, with the html of the first cloned object. The real problem is that those "blocks" added after page load do not work properly.

Please give me a hand with this, so I could have blocks that work properly, dynamically added.

[mr_lundis]

Hello ionutvalean, and welcome to the forum!
Cloning the entire form won't work as you already know. I would create a completely new instance of the whole form, but if you for some reason can't do that try removing the cloned WYMeditor markup instead. When you got the form in place create a new instance of the editor to convert the new/cloned textarea into an editor.

Cheers!

[ionutvalean]

Hi mr_lundis,

Thanks for the reply.
I had managed to make it work. I left the snippet like that and when I needed a new instance of the WYMEditor I just cloned the snippet and run the WYMEditor initializer on that clone.
On top of that I needed to know what was it's instance number, so I made a hidden span in the snippet that kept the WYMeditor.INSTANCES.length. With that I can refer to it at any time.

Cheers