Playing with the Joomla WYSIWYG editor

One thing I had to figure out was how to set the editor’s contents via JavaScript and get its contents in my controller. It turns out that Joomla 1.5’s API provides a way to do so without knowing what editor you are actually using.

 The first thing to do is grab and instance of your preferred editor.

$editor =& JFactory::getEditor();

Next, output the editor’s code via the display method. Either append this to a variable you will be echoing out in your template or echo it directly if it’s in your template.

echo $editor->display('descText', 'Some text', '100%', '200', '75', '20', false);

“descText” will be the html id of the editor, the next argument in any default text to appear in the editor, and the next four deal with the editor’s size. The last argument determines if the image, page break, and read more options should be available. Passing true or leaving it blank will show the options. Passing false will cause them to not show.

Now a brief explanation of buttons. When you create one with the button tag or in a toolbar, they trigger a javascript function called submitbutton. By default it works like this.

function submitbutton(task) {
	submitform(task);
}

So, we’ll need to redeclare it with our own Javascript. I do it using the JDocument object.

$document =& JFactory::getDocument();
$document->addScriptDeclaration("function submitbutton(task) {
	var text = ".$editor->getContent('descText') ."
	if (task == 'save') {
		".$editor->save()."
		submitform(task);
	}
}");

The javascript function will come out in your html code like this.

function submitbutton(task) {
	 var text=tinyMCE.getContent();
	if (task == 'save') {
		 tinyMCE.triggerSave();
		submitform(task);
	}
}

Remember that “descText” was the id we gave the editor. This assumes that you named your task that needs to access the editor’s content to “save”. By default your component will be using controller.php to look for tasks. You could manually specify one by putting the following line in your html form.

<input type="hidden" name="controller" value="customcontroller" />

This will look for customcontroller.php in your components controllers directory. Whichever you are using, you can get the editor’s contents with the following:

$editorText = JRequest::getVar('descText', '', 'post', 'string', JREQUEST_ALLOWRAW);

That covers the basic getting of your editor’s contents. Now onto setting them. Create a javascript function such as the following:

$document->addScriptDeclaration("function updateEditor(text) {
	".$editor->setContent('descText', 'text')."
}");

The javascript function will come out in your html like this.

function updateEditor(text) {
	tinyMCE.setContent(text);
}

Once again, “descText” is the id of the editor. The second argument is the name of the javascript variable that will hold the new content.

About Adam Oliver

Adam Oliver has been working in the IT field for over 10 years and is a Sales Engineer for Citrix Systems, Inc. Follow Adam on twitter at http://twitter.com/theadamoliver. Find out more about Citrix at www.citrix.com.
This entry was posted in Web Development and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *