Tutorials/Wysiwyg

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

Step one:

You will need to create your plugin and give it a start.php file where the plugin gets initialised.

  • mod/
  • mod/tinymce/
  • mod/tinymce/start.php 
<?php
 
    /**
     * TinyMCE wysiwyg editor
     * @package ElggTinyMCE
	 * @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html GNU Public License version 2
	 * @author Curverider Ltd
	 * @copyright Curverider Ltd 2008
	 * @link http://elgg.org/
     **/
 
    function tinymce_init() {
 
 
     }
 
     // Make sure the tinymce initialisation function is called on initialisation
		register_elgg_event_handler('init','system','tinymce_init');
 
?>

Step two:

Now you need to upload, in this case TinyMCE, into a directory in your plugin. In this tutorial, the directory has been called 'tinymce'.

  • mod/
  • mod/tinymce/
  • mod/tinymce/tinymce/

Step three:

Now that you have created your start file, intialised the plugin and uploaded the wysiwyg code, it is time to overwrite the default longtext input field with our new one.

All you need to do is replicate the file path and file name of the input you want to overwrite:

  • mod/
  • mod/tinymce/
  • mod/tinymce/views/
  • mod/tinymce/views/default/
  • mod/tinymce/views/default/input/
  • mod/tinymce/views/default/input/longtext.php

Once done, put the text you require in your longtext.php and you will now have your wysiwyg. 

<?php
 
	/**
	 * Elgg long text input with the tinymce text editor intacts
	 * Displays a long text input field
	 * 
	 * @package ElggTinyMCE
	 * @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html GNU Public License version 2
	 * @author Curverider Ltd
	 * @copyright Curverider Ltd 2008
	 * @link http://elgg.org/
	 * 
	 * @uses $vars['value'] The current value, if any
	 * @uses $vars['js'] Any Javascript to enter into the input tag
	 * @uses $vars['internalname'] The name of the input field
	 * 
	 */
 
?>
<!-- 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>
<!-- show the textarea -->
<textarea class="input-textarea" name="<?php echo $vars['internalname']; ?>" <?php echo $vars['js']; ?>><?php echo $vars['value']; ?></textarea>

External Links

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.

Retrieved from "http://docs.elgg.org/wiki/Tutorials/Wysiwyg"

Navigation

Search docs