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".