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
- cut
- copy
- paste
Indents:
- indent
- outdent
Fonts/styles:
- removeformat
- formatselect
- fontselect
- fontsizeselect
- sytyleselect
Super/subscript:
- sub
- super
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.
Related Posts
-
Steve … wondering if you found a way to include the iframe tag.
I’d like to embed googledocs in some of my pages but when I do this in the current html editor the tag gets stripped. This seems to indicate that it would require a little more than simply including the right button in the editor. I’m also wondering if you know how to allow fine grained access to different TinyMCE toolbars. That would be one way to protect against iframe insertions.
-
Just a follow up. I was able to allow in the editor by adding it to the extended_valid_elements line in longtext.php. Now an iframe I insert in the html view will show up in the editor. However, upon saving the page the iframe is clipped, apparently by something in the elgg system.
A discussion from the google groups suggested that in elgg 0.9 the lib/constants.php file would also need to be updated for or tag inclusion. But I can’t find this file or its successor in elgg 1.5. Any ideas?
-
Hi Matt–
Sorry I couldn’t get to you sooner. I was going to suggest working in longtext.php in the extended valid elements, but you figured it out yourself.
As far as the rest goes, it seems to me that there is something in elgg itself that impacts such, but I can’t recall where I ran into it.
Can you think of some text strings that you could grep?
-
Well, that part is kind of guesswork on this end. I don’t really know what I’m looking for and only found the longtext.php solution via your posts here and comments on the google group.
I’ve done a little digging through comments in the original lontext.php file and other files in the original /input folder but nothing jumped out at me and that is in the /views area rather than the core. My guess is that Elgg filters at the core level to get rid of insertion threats across the site.
If you get any brainwaves or can refer me to some one or somewhere, let me know.
-
I’m getting warmer Steve! The code we’re looking for is the kses script which filters html text. The call for the code is found in engine/lib/input.php and the script itself is in vendors/kses/. Apparently this whole issue has already been under discussion. The most recent version of input.php (http://reference.elgg.org/input_8php-source.html) seems to have rewritten the original call with a much more configurable approach. I’ll do a bit of tinkering to see if I can break anything. If you have any suggestions, let me know.
-
Looks like in the trunk, kses has been removed entirely from the vendors and input.php and is now a module with allowable attributes listed in start.php
-
That’s done it! I just uploaded the new input.php and gave er a whirl. We’re in business.
Next step is to upload the kses mod and find a way to allow admins to access a wider range of tags. Do you happen to know what function I would use for that?
-
Very useful information, many thanks for sharing it!
I just launched my first social networking site, at MiamiJob.com and it’s because of your fine explanations that I could make the TinyMCE editor work the way I need to.
This work by Stephen J. O’Connor is licensed under a Creative Commons Attribution 3.0 Unported License.
9 comments
Comments feed for this article
Trackback link: http://openedweb.com/blog/2008/08/31/basic-hacking-tinymce-in-elgg/trackback/