At the moment, in our component's backend, when adding or editing a new element, we have a simple textarea to do it. We enhanced this textarea to grow, as needed, when text was entered in it. But, what if we want to do something more with it, such as adding images, links, bold text, and so on?

For this we could use a WYSIWYG editor. WYSIWYG stands for What You See Is What You Get, and if you have been using Joomla!, you surely will have seen one.

We can add a jQuery editor plugin, much in the same way that we added the textarea autogrow script. However, this is quite easy, and I think it would be more interesting to see how to use Joomla!'s editor.

First, open the administrator/components/com_tinynews/views/addnews/tmpl/form.php file. In this file, we will remove the simpleautogrow plugin because it won't work together with the WYSIWYG editor. Remove the next piece of code, except for the highlighted line, which is still needed:

$js = JURI::base().'components/com_tinynews/js/ jquery.simpleautogrow.js';
            $document =& JFactory::getDocument();
            $document->addScript($js);
        

Also, remove the following line:

$('textarea').simpleautogrow();
        

Now search for the following code:

<textarea class="text_area" type="text" name="text" id="text" cols="40" rows="5" title="Write the news' text here"><?php echo $this->news->text;?></textarea>
        

This was the code we used to create our textarea. We will change it as follows:

<?php
            $editor =& JFactory::getEditor();echo $editor->display('text', $this->news->text, '550', '400', '60', '20'),
            ?>
        

This will generate an editor just like the one you can see in the following screenshot:

Let's take a look into the parameters we used to create it:

echo $editor->display(the element name as in any other input, the value, width, height, columns, rows);
        

Now, if we try to write text and save it, we will see that it works, and our text is saved just as when we worked with a textarea. However, if we add some HTML code, like some bold text for example, the HTML won't be saved. That's a security measure. All HTML is removed before our text is inserted in the database.

But we want our HTML to be saved. So open the administrator/components/com_tinynews/models/addnews.php file and search for this line:

$data['text'] = JRequest::getVar( 'text', 'null' );
        

Change it as follows:

$data['text'] = JRequest::getVar( 'text', 'null', 'post', 'string', JREQUEST_ALLOWRAW );
        

The post and string parameters are not the important parts here, though they are useful to tell us that we are receiving the value from the POST array, and that we expect a string value.

The last parameter, JREQUEST_ALLOWRAW, will be the most important one, as it will tell Joomla! to not remove the HTML. The exact value of the variable will be put into the database, text, and HTML.

And we are done! With this we have a complete WYSIWYG editor available in our component.