Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Itsa EditorToolbar (gallery-itsatoolbar) on cdn

Last Updated: 02/24/13

+ 1 -

Marco Asbreuk

YUI Contributor

See 4 more by this user.

Created: 09/3/12
Last CDN Push: 10/3/12
Build Tag: gallery-2012.10.03-20-02
Project: YUI 3
License: YUI BSD
YUI Version: 3.9.0pr3
Free for use.

GUI for the Rich Text Editor.

It is really light weight: based on css-buttons and ItsaSelectlist items.
You can even add your own custom-buttons if you want.

Known issues:

Opera will fail when making selections before using the toolbar.
Inserting images, url, emaillinks and fileuploads is for next versions. They need to work with Y.panel, not with a simple prompt that is used at the moment. url and emailbuttons are visible by default (for convenience)

To do:

Improve functionality of the email and url buttons
Create image button
Create video, calendar, maps, iframe, save and close buttons
Make it possible for users to redefine buttonpositions
Improve documentation about inserting custom buttons

Tags:
itsasbreuk gui editor

The editor toolbar will be rendered after the editor fires 'ready'.
So you don't have to wait until the editor is ready yourself: just plugin.

Code Sample

<script src="http://yui.yahooapis.com/3.9.0pr3/build/yui/yui-min.js"></script>

// if you want a toolbar inside the editor-div: 
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.10.03-20-02'
}).use('editor-base', 'gallery-itsatoolbar', function(Y) {
    var myEditor = new Y.EditorBase();
    myEditor.plug(Y.Plugin.ITSAToolbar);
    editor.render('#editor');
});
 
 
// or, if you want a toolbar on top of the page in a separate div: 
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.10.03-20-02'
}).use('editor-base', 'gallery-itsatoolbar', function(Y) {
    var myEditor = new Y.EditorBase();
    myEditor.plug(Y.Plugin.ITSAToolbar, {srcNode: '#divtoolbar'});
    editor.render('#editor');
});
 
 
// or, if you want just big-sized BIU-buttons: 
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.10.03-20-02'
}).use('editor-base', 'gallery-itsatoolbar', function(Y) {
    var myEditor = new Y.EditorBase();
    myEditor.plug(Y.Plugin.ITSAToolbar, {
        btnEmail: false, 
        btnFontfamily: false, 
        btnHeader: false, 
        btnFontsize: false, 
        btnHyperlink: false, 
        btnMarkcolor: false, 
        btnTextcolor: false, 
        grpAlign: false, 
        grpIndent: false, 
        grpLists: false, 
        grpSubsuper: false, 
        grpUndoredo: false,
        btnSize: 3
    });
    editor.render('#editor');
});

// if you want a toolbar inside the editor-div: 
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.10.03-20-02'
}).use('editor-base', 'gallery-itsatoolbar', function(Y) {
    var myEditor = new Y.EditorBase();
    myEditor.plug(Y.Plugin.ITSAToolbar);
    editor.render('#editor');
});

// or, if you want a toolbar on top of the page in a separate div: 
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.10.03-20-02'
}).use('editor-base', 'gallery-itsatoolbar', function(Y) {
    var myEditor = new Y.EditorBase();
    myEditor.plug(Y.Plugin.ITSAToolbar, {srcNode: '#divtoolbar'});
    editor.render('#editor');
});

// or, if you want just big-sized BIU-buttons: 
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.10.03-20-02'
}).use('editor-base', 'gallery-itsatoolbar', function(Y) {
    var myEditor = new Y.EditorBase();
    myEditor.plug(Y.Plugin.ITSAToolbar, {
        btnEmail: false, 
        btnFontfamily: false, 
        btnHeader: false, 
        btnFontsize: false, 
        btnHyperlink: false, 
        btnMarkcolor: false, 
        btnTextcolor: false, 
        grpAlign: false, 
        grpIndent: false, 
        grpLists: false, 
        grpSubsuper: false, 
        grpUndoredo: false,
        btnSize: 3
    });
    editor.render('#editor');
});