How to use JavaScript in Joomla 1.6 Custom HTML Module

Introduction

Recently I tried to use a custom HTML module in Joomla 1.6.
There are a few problems with using this to get pure HTML displayed as you have copied it from somewhere to display a widget or something.
Even more complicated is to get JavaScript to work in the module. By default the <script> tag gets stripped out.

Be able to use pure HTML

By default any user in your Joomla backend (administration area) use the TinyMCE. When you create the Custom HTML Module the text field on the bottom left will also use this Editor. The problem is that this is a WYSIWYG editor(What You See Is What You Get). That means you basically enter regular text like in Word and the editor will translate it into the according HTML code. If you paste HTML into the editor it will not interpret the code as HTML.

There are two options to bypass that problem.

1. Go into HTML mode

The TinyMCE editor has a button HTML that lets you edit HTML. If you use this option you can past pure HTML there. Be aware that when you hit "Update" the Editor window only shows the interpreted code. So you don't see all the HTML tags anymore.

2. Turn of the Editor

I personally prefer the second option. If you worked a bit with HTML it will make sense for you too. Editors like TinyMCE still produce kind of messy code and things not always look like I want them.

To turn of the editor for your user perform the following steps:

• 1. Go to Users > User Manager.
• 2. Click on your user's name
• 3. On the right select at Editor "Editor - None"
• 4. Save

Now when you open a Custom HTML Module you just have a plain text field.

Be able to use JavaScript

If you past HTML code in the plain text field of the Custom HTML Module it should work now without problems. When you paste JavaScript though, the <script> tags will get stripped, which will make your JavaScript appear as text on the frontend.

To change the filtering of JavaScript in your text you can turn of filtering for your admin user like this:

• 1. Go to Content > Article Manager
• 2. Click Options
• 3. In the Popup go to Text Fitlers
• 4. Depending on what kind of user you are (e.g. SuperUser) change Filter Type to No Filtering
• 5. Save & Close

Text or Textarea Attribute in Joomla 1.6 Module prevent filtering

Another related problem is that in modules you have sometimes attributes you can set. If it is a textarea you want to use HTML or JavaScript here as well, but it all gets filtered, even if you have the above settings applied.

A solution here is to modify the module xml file and add teh attribute filter="raw" to the field definition.

Now you should have no problem to paste JavaScript and save it in the Custom HTML Module.
Let me know if you have any problems.