Multiple TinyMCE editors, but only one toolbar?

Question

I've looked around the forum, but cannot seem to find a definite answer to this problem...

I'm using jQuery and TinyMCE on our website. I've gone through the docs of TinyMCE, but am still getting lost I'm afraid. We're doing an interface that requires edit-in-place in multiple places in the page. The only thing is, each of these will have all the editing choices from TinyMCE in one toolbar at the top. So, to recap it, it's multiple editors (that each have no toolbars of their own, just a place to edit or select the text) and only one toolbar at the top of the page to control whichever textbox is active at the time.

How could this be achieved? Is it even possible? Any help, any push in the right direction, any hints/tips/knowledge at all on this problem would be a great, great help.

Thanks, James

Answer 1

I did with the 3.x version like this (it's Prototype syntax):

First, I created a toolbar wrapper (in my case I attached it with position:fixed at top of the document:

<div id="externalToolbarWrapper"></div>

Then I set the setup function in the tinyMCE-settings (for each editor) like this:

[...]
theme_advanced_toolbar_location : "external",
setup : function(ed) {
    ed.onInit.add(function(ed, e) {
        ed.onPostRender.add(function(ed, cm) {
            var toolbar = $(ed.id + '_external');
            // inserts the external toolbar in the external wrapper
            $('externalToolbarWrapper').insert(toolbar.hide());
        });
        ed.onRemove.add(function(ed) {
            if($(ed.id + '_external')) {
                // removes external toolbar
                $(ed.id + '_external').remove();
            }
        });
    });
}

This worked in my case - the editors show/hide the toolbars on activation/deactivation.