The extended Elgg includes the Tinymce wysiwyg editor with a well selected, yet limited set of tools. Many have asked about extending the options and, in fact, there are several more tools waiting to to activated. Some are very simple to implement, while others are more complex. We will start with the simple changes and deal with more complex modifications in the future.
The default Tinymce text editor in Elgg 1.0 appears like this:

This gives you the following tools:
- Bold
- Italic
- Underline
- Strikethrough
- Bullet List (bullist)
- Number list (numlist)
- Undo
- Redo
- Link
- Unlink
- Image
- Quote (blockquote)
- Source (code)
Many have grown fond of a larger tool set with other applications or would like to see more features suited to their use of Elgg. Most of these tools are already loaded on your Elgg installation just waiting to be activated. Some can be activated by typing a single word into a file.
Looking at moxiecode’s documentation, I found that I can easily configure tinymce by editing a file containing:
tinyMCE.init({
Which file is that? It’s hidden deep in the mod/tinymce directory (grep is your friend!):
mod/tinymce/views/default/input/longtext.php
Elgg’s default tinymce configuration is as follows:
tinyMCE.init({ mode : "textareas", theme : "advanced", theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,bullist,numlist,undo,redo,link,unlink,image,blockquote,code", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]" });
Note the text in above in blue. Those call up the options seen in the bulleted list above. Each of the lines starting with theme_advanced_buttons represent a row of buttons in the editor:
theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,bullist,numlist,undo,redo,link,unlink,image,blockquote,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
As configured above, there are only tools in the first row of buttons. Additional options can be added by inserting text in any of the three rows, depending upon where you weant them to appear.
There are many functions you can add to any of these three rows by adding words to bring up buttons. For example:
Text Justification:
- justifyleft
- justifycenter
- justifyright
- justifyfull
Basic Copy/Paste
Indents:
Fonts/styles:
- removeformat
- formatselect
- fontselect
- fontsizeselect
- sytyleselect
Super/subscript:
Color:
- forecolor
- backcolor
- forecolorpicker
- backcolorpicker
Here is one possible configuration:
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "media, emotions, fullscreen",
media_use_script : "true",
cleanup : "true",
theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,bullist,numlist,undo,redo,link,unlink,image,blockquote,code",
theme_advanced_buttons2 : "media, emotions, fullscreen, forecolor, cleanup",
theme_advanced_buttons3 : "fontselect, justifyleft, justifycenter, justifyright",
theme_advanced_toolbar_location : "top",
Resulting in this:

More information may be found about options and functions here.
This should get you started. There are even more options that need further configuration–some simple, others complex. I have found some vexing, but I plan on discussing more complex plugins allowing spell checking, embedding media, and other functions in the near future.
Recent Comments