TinyMCE - multiple configs/inits with jQuery

I'm building a site based on jQuery and Ajax, almost every element on the site is created with jQuery.

This can be very effective because it releases a lot of work of generating the pages from the server.

One of the problems I usually encounter is that plugins is usually not designed for this kind of programming, that the elements is created after 开发者_如何学JAVAthe site is loaded.

tinyMCE got a jQuery version, but it just work to install and initiate right away.

var textarea = $("<textarea/>");
and then just play with
textarea.tinymce({ 
     script_url : 'js/tiny_mce/tiny_mce.js',
     theme : "advanced"
     configs:yeah...
});

When I try to do it on one more, textarea2.tinymce({ ease:peace }); then it dose not load, it hides the textarea2 but no editor is shown, as far as I understand its because the editor is already created in the DOM.

I don't want to remove the first one, I just want to initiate one (or more:) more. I have tried to use tinyMCE.init with editor_selector:mceAdvanced1 but when I later create the $("").addClass("mceAdvanced1") with jQuery it don't want to load with the editor.

or like this

var ed = new tinymce.Editor({
    some_setting : 1
});
var textarea = $("<textarea/>");
ed.add(textarea);

And I tried to store the jQuery version in a variable but dose not work if I don't append it right away, and its not possible to move it after its created or clone it...

It would be very nice to be able to have the editor on more than one place on the site without needing to reload it, so therefore I'm asking for your help so I could solve this.

Thanks for your effort.

EDIT

Since the jQuery version of TinyMCE did't work like I thought, I have changed my approach how to solve it, but through, its would be real nice to see a refinement of the jQuery version so you can work with more than one instances. The solution is to initiate 2 different editors when the page loads and just hide them and when the elements are created where they will be used just append the editor to it.

This is how I do it, Initiate the editor...

tinyMCE.init({
    mode : "exact",
    elements : "popup",
    // General optionss...
});

And where I build the site with jQuery, I just apply it this way...

tinyMCE.execCommand('mceRemoveControl', false, 'popup');
dd.append($("#popupContainer"));    
$("#popupContainer").show();
tinyMCE.execCommand('mceAddControl', false, 'popup');
tinyMCE.activeEditor.setContent('');

I've struggled with a similar issue, and have been using the livequery plugin for this ever since I found it. It allows you to circumvent a lot of issues related to adding new elements to the DOM.

A usage example would look like this:

// Using the TinyMCE jquery build
$('textarea.wysiwyg').livequery(function () {
    $(this).tinymce({/* your options */});
});

There may be more efficient (and likely verbose) ways of doing it, but since the livequery plugin is so useful for an all-ajax site, I highly recommend it.

The solution with livequery was exactly what i need, but the way Wesley told us doesn't work for me after changing dom and adding a new textarea. The following solution works for me after hours of trying to debug. ;) All my textareas working with tinyMCE got the class "tinyMceEditor", so the selector of livequery in my case is "textarea.tinyMceEditor".

$('textarea.tinyMceEditor').livequery(function () {
    tinyMCE.init({
        mode : "exact",
        elements : $(this).attr('id'),
        theme : "advanced",
    });
});

To have several tinymce instances using an other configuration each you may want to have a look at this example: http://tinymce.moxiecode.com/tryit/multiple_configs.php

I also posted here: TinyMCE - adding an ON/OFF toggle switch a solution that works for this. I suggest to not use the jquery helper to manipulate multiple tinymce instances on the same page. I don't believe that the jquery helper was made for this. Just use the tinyMCE object, which in any case, gives you a simple way to initialize once for all your instances, which is like this:

tinyMCE.init({
    theme : "advanced",mode : "exact",
    mode : "none", 
    plugins : strplgns,
    theme_advanced_buttons1 : strbtns1,
    theme_advanced_buttons2 : strbtns2,
    theme_advanced_buttons3 : strbtns3,
    content_css : "/css/hlsl.css"
});  

Notice the {mode: "none"} which means that you are initializing the tinyMCE object but not creating an editor. In my case, the strbtnsX strings are pretty long, so I think initializing once per page, rather than once per editor provides a performance gain (but I didn't test the performance at all). After this initialization, all the editors that you will put on the page with mceAddControl will look and function the same. Then I just use simple show and hide functions to toggle the editors as I need them:

function showBlogEditor(strItemId){
    var theeditor = tinyMCE.get(strItemId); //strItemId is the ID of the HTML element
    if(theeditor && theteditor.initialized){
        //you can do something here if you need
    }else{
        tinyMCE.execCommand('mceAddControl', false, strItemId);
    }
}
function hideBlogEditor(strItemId){
    if (tinyMCE.getInstanceById(strItemId))
    {
            tinyMCE.execCommand('mceFocus', false, strItemId);
            tinyMCE.execCommand('mceRemoveControl', false, strItemId);
    }           
}

Please let me know if you get it working with the jquery helper. After a zillion hours on it, I didn't get it to work, so I just fell back to this simply solution.