Add HTML Rich Text Editor Field in Joomla Module/Component

Let’s say that you are building a form in Joomla, but you need one of your fields to be an HTML text editor instead of a normal textarea, how do yo do that?

Well, it’s very simple in Joomla – if you’re building the form using MVC (Model-View-Controller), and you want to add a field called Product Information then you will need to do is to add the following in your XML definition file located under /your_component_name/models/forms:

<field name=”product_information” type=”editor” label=”Product Information” description=”Please add information about your product here.” default=”–Product information not available–” filter=”safehtml” />

Let us explain each and every field in the above :

name: The name of the field item. This means that if the name of your field is product_information, then you will get a variable called $_POST[‘product_information’] when you submit the form.

type: The type of the field element. You should write editor if you want the field to be an HTML editor.

label: The label of the field that will appear next to the field element.

description: The description of the field. This information (along with the label text above) will be displayed depending on your view.

class: The CSS class of the field.

default: The default information of the field. Usually in rich text editors (aka HTML editors) you don’t fill in default information.

filter: When set to safehtml, this will ensure that all malicious/dangerous HTML is stripped automatically by the editor. It is always recommended to set filter to safehtml when you’re using the text editor in a form on the frontend of your website.

2 notes on this method:

1) It’ll work on Joomla 1.6, 1.7, and 2.5 and

2) you will need to place the <field> tag inside a <fieldset> tag.

Now, if you want to add the HTML editor manually into your code for use on your Joomla website, then here’s the code that you should add:

$editor =&JFactory::getEditor();
echo $editor->display($field_name, $default_value, $width, $height);

Here’s the explanation on the above fields:

$field_name: The name of the field. This is equivalent to product_information in the method above.

$default_value: The default value of the field. (can be left blank)

$width: The width of the generated HTML editor.

$height: (Yes, you’ve guessed it) The height of the generated HTML editor.

Again, the above code will works on Joomla 2.5.

You can also add an HTML editor to your Joomla website without using the Joomla library at all. This involves installing the source code of the HTML editor in the right place, and then invoking the right method to display that text editor. Although the concept for doing this is the same for all text editors, the code is (sometimes substantially) different from one editor to another. Please refer to the instructions manual for the editor that you want to install if you don’t want to use Joomla’s default editor.

Leave a Comment