How to Add an HTML Text Editor Field in Joomla?

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."
        class="form_field"
        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 only 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 only works on Joomla 1.6 and higher (including 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.

Now if you’re not able (after reading this guide) to install an HTML editor on your Joomla website then we’re here to help! Just contact us and we’ll do it for you. It won’t take a lot of time and it won’t cost you much! Oh, and we’re very, very friendly! (we like to mention this a lot, because we proud ourselves in our friendliness with our clients – and with everyone else in general!)