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 know there is a way to show the toolbar when a textarea is focused into, and then hide on textarea blur event - so that could be one route.

I do a similar sort of thing (with multiple textareas) where i load in demand the tinyMCE, so something like loading on demand and then destroy when finished with (blur event) might be what you're after.

I can't give you all of my code as it's actually part of my employer's I.P, but here is a rough outline to it, hopefully should help. The tinyMCE_GZ is part of the gzip which is off the tinyMCE site.

isTinyMCE_Loaded = false;

jQuery('.my-textarea').one("click", function(){
    BuildWYSIWYG.Full(jQuery(this));
})

BuildWYSIWYG.OnDemand: function(callback){
    tinyMCE_GZ.init({
        plugins : 'style,table,advhr,advimage,advlink,insertdatetime,preview,searchreplace,contextmenu,paste,fullscreen,visualchars,nonbreaking,xhtmlxtras,safari,tinybrowser',
        themes : 'simple,advanced',
        languages : 'en',
        disk_cache : true,
        debug : false
    }, function(){ 
        isTinyMCE_Loaded = true; 
        callback();
    });
};
BuildWYSIWYG.Full: function(el){   
    settings.elements = jQuery(el).attr("id");

    // Build advanced wysiwyg
    if (isTinyMCE_Loaded){
        tinyMCE.init(settings);
    } else {
        BuildWYSIWYG.OnDemand(function(){
            tinyMCE.init(settings);
        });
    }
}

Answer 2

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.

Answer 3

There might be another way. Take a look at this example. http://tinymce.moxiecode.com/examples/example_23.php

You can use the links at the bottom (Show,Hide,Bold,Get Contents etc) as a menu (may require some styling). Then, get the id of the textarea currently in focus and pass it to the menu (#current) and use it to change that textarea.

To achieve what you are describing:

1. First disable all the indivudual TinyMCE menu items.
2. Once they are disabled, create your own TinyMCE menu in HTML and style it accordingly.
3. Determine which TinyMCE textarea in focus
4. Apply the actions from your new menu to the Textarea that is focused

Now for some code (may require some debugging...)

First, Initialize TinyMCE and disable menus.

tinyMCE configs 
({
    mode : "textareas",
    theme : "advanced",
    editor_selector : "editable"
    theme_advanced_buttons1 : "",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "botton",
    theme_advanced_statusbar_location : "bottom" });

I think you can also edit the _addToolbars function in tiny_mce/themes/advanced/editor_template_src.js and then pack it.

Then determine the text area that is currently in focus using jQuery bind:

$().ready(function() {
        var current;
        $('.editable').focus(
            current = this.id;
        );
        $('.editable').blur(
            //maybe hide the menu (?)
        );

}

Then create the HTML with our textareas and the menu

<form method="post" action="somepage">  
<div id="independent_menu">
    <!-- The Menu, Please Style Accordingly -->
    <a href="javascript:;" onmousedown="$('#current').tinymce().show();">[Show]</a>
    <a href="javascript:;" onmousedown="$('#current').tinymce().hide();">[Hide]</a>
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('Bold');">[Bold]</a>
    <a href="javascript:;" onmousedown="alert($('#current').html());">[Get contents]</a>
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getContent());">[Get selected HTML]</a>
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getContent({format : 'text'}));">[Get selected text]</a>
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getNode().nodeName);">[Get selected element]</a>
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert HTML]</a>
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('mceReplaceContent',false,'<b>{$selection}</b>');">[Replace selection]</a>
</div>

<!-- The Text Areas  -->

<textarea class="editable" id="one">Some Text Here</textarea>

<textarea class="editable" id="two">Yet another text area</textarea>

<textarea class="editable" id="three">Final Text Area</textarea>

Answer 4

I did this with an older version of tinymce:

http://tinymce.moxiecode.com/punbb/viewtopic.php?id=10197 http://examples.dtbaker.com.au/code/tinymce/

Haven't re-produced this with the latest version though :(

But basically there's two ways to do it, either:

1) Create your own menu that calls tinymce arguments on the active tinymce editor.

2) Set the tinymce toolbar/menu to be external, so that it appears when you focus an editor. Then using CSS you position each toolbar to appear in the same place. So it looks like there is a single toolbar but in fact it is multiple toolbars appearing in the same place.

Hope that helps.

Answer 5

I am providing solution for this question in case anyone still comes here for one. You can use execCommand to execute various styles of text you like while clicking on your custom buttons. For example:

// bold, italic and underline
$('#bold').click(function(){
    tinymce.execCommand('Bold');
});
$('#italic').click(function(){
    tinyMCE.execCommand('Italic');
});
$('#underline').click(function(){
    tinyMCE.execCommand('Underline');
});

//commands for left align, right align and center align
$('#l-a').click(function(){
    tinyMCE.execCommand('JustifyLeft');
});
$('#c-a').click(function(){
    tinyMCE.execCommand('JustifyCenter');
});
$('#r-a').click(function(){
    tinyMCE.execCommand('JustifyRight');
});

//commands for inserting ul or ol
$('#ul').click(function(){
    tinyMCE.execCommand('InsertUnorderedList');
});
$('#ol').click(function(){
    tinyMCE.execCommand('InsertOrderedList');
});

where #bold, #italic, #ul etc. are ids of the html elements which you are using to do implement styling. For example:

<button id="bold">B</button>

This button will bold the text, no matter the text is in which instance of tinymce. Though the only drawback with this functionality is that you will have to do a lot of work for showing the effect on particular button when its on or off. If you are not concerned with that then this will do the trick.

I hope it helps...