Documentation

See www.tinymce.com for the documentation and installation guidelines for TinyMCE.

Basic example

A normal init of TinyMCE with the theme 'ribbon'


tinyMCE.init({
               mode : 'textareas', 
               theme : 'ribbon',
               content_css : 'css/editor.css',
               plugins : 'bestandsbeheer,tabfocus,advimagescale,loremipsum,image_tools,embed,tableextras,style,table,inlinepopups,searchreplace,contextmenu,paste,wordcount,advlist,autosave',
               inlinepopups_skin : 'ribbon_popup'
});


Configuration of the toolbars:

tinyMCE.init({
               mode : 'textareas', 
               theme : 'ribbon',
               content_css : 'css/editor.css',
               height: 600,
               plugins : 'bestandsbeheer,tabfocus,advimagescale,loremipsum,image_tools,embed,tableextras,style,table,inlinepopups,searchreplace,contextmenu,paste,wordcount,advlist,autosave',
               inlinepopups_skin : 'ribbon_popup',

               theme_ribbon_tab1 : {   title : "Start",
                                        items : [
                                                ["paste"], 
                                                ["justifyleft,justifycenter,justifyright,justifyfull",
                                                 "bullist,numlist",
                                                 "|",
                                                 "bold,italic,underline",
                                                 "outdent,indent"], 
                                                ["paragraph", "heading1", "heading2", "heading3"],
                                                ["search", "|", "replace", "|", "removeformat"]]
                                    },
                                    

                                    
                theme_ribbon_tab2 : {   title : "Insert",
                                        items : [["tabledraw"],
                                                ["image", "bestandsbeheer_file", "bestandsbeheer_video", "bestandsbeheer_mp3"],
                                                ["embed"],
                                                ["link", "|", "unlink", "|", "anchor"],
                                                ["loremipsum", "|", "charmap", "|", "hr"]]
                                    },
                
                theme_ribbon_tab3 : {   title : "Source",
                                        source : true
                    
                                    },
                
                theme_ribbon_tab4 : {   title : "Image",
                                        bind :  "img",
                                        items : [["image_float_left", "image_float_right", "image_float_none"],
                                                ["image_alt"],
                                                ["image_width_plus", "|", "image_width_min", "|", "image_width_original"],     
                                                ["image_edit", "|", "image_remove"]]
                                    }

});

 

Toolbars

Every theme_ribbon_tab makes a tab with buttons. The title is uses as the title in the tab. Items are grouped in sets. A "|" is used as a seperator.

Bind

The bind property of a theme_ribbon_tab binds the toolbar to a DOM element. The theme_ribbon_tab4 is only visible when an image is selected in the editor.

Use a classname to bind only DOM elements with that class. For example:

bind :  "div.media_embed"

This binds to a DOM element with the classname "media_embed".