
Updated for 1.8
This short tutorial will show you how to build your own wysiwyg plugin. We have created one based on Tinymce, however, if you have a wysiwyg that you prefer, you could use this tutorial to help you build your own.
All input fields in Elgg should try to use the provided input views located in views/default/input - if these views are used, then it is simple for plugin authors to replace a view, in this case longtext.php with their wysiwyg.
Contents |
You will need to create your plugin and give it a start.php file where the plugin gets initialized, as well as a manifest.xml file to tell the Elgg engine about your plugin. Read more here.
Now you need to upload TinyMCE into a directory in your plugin. We strongly encourage you to put third party libraries in a "vendors" directory, as that is standard practice in Elgg plugins and will make your plugin much more approachable by other developers.
Now that you have created your start file, intialised the plugin and uploaded the wysiwyg code, it is time to tell Elgg how to apply TinyMCE to longtext fields.
We're going to do that by extending the input/longtext view and including some javascript. Create a view tinymce/longtext and add the following code:
<?php /** * Elgg long text input with the tinymce text editor intacts * Displays a long text input field * * @package ElggTinyMCE * * */ ?> <!-- include tinymce --> <script language="javascript" type="text/javascript" src="<?php echo $vars['url']; ?>mod/tinymce/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <!-- intialise tinymce, you can find other configurations here http://wiki.moxiecode.com/examples/tinymce/installation_example_01.php --> <script language="javascript" type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "advanced", theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,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], hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]" }); </script>
Then, in your plugin's init function, extend the input/longtext view
function tinymce_init() { elgg_extend_view('input/longtext', 'tinymce/longtext'); }
http://tinymce.moxiecode.com/ - TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.
For the original 1.7 version of this tutorial, click here: http://docs.elgg.org/w/index.php?title=Tutorials/Wysiwyg&oldid=3661