How to add Javascript code to articles or Custom HTML modules in Joomla

Last updated

By default, text editors in Joomla administrator interface work in visual (WYSIWYG) mode. WYSIWYG editors allow editing the HTML markup when you just need to publish some text and throw bolds and headers here and there, but when you try to publish a Javascript code through it, it will do its best to reformat it in the way that it shows up as a readable text, not as an actual working code. Moreover, there are security settings in Joomla that can prohibit using of Javascript codes within an HTML, in such cases the text editor just strips all <script> blocks.

Thus, when adding some custom Javascript in your article or custom HTML module, you might find out that it doesn't work in the front end or even disappears from HTML sources. Please follow these instructions in order to solve such problems.

1. Set up general text filtering options for being able to use Javascript safely inside HTML source editor.

  • Open Content → Article Manager in your Joomla administrator panel and click on the 'Options' button in top right corner
  • In the new popup window with Article Manager Options, open the 'Text Filters' tab and select 'No Filtering' under your user group (it is usually 'Super Users')
  • Click 'Save'


 

2. Configure your text editor so that it allows you to have <script> elements in your code.

The text editor that you use in Joomla may set its own security settings, which can affect code formatting. By default, the 'TinyMCE' is used in Joomla administrator interface. Here is how to configure it properly:

  • In your administrator panel, go to Extensions → Plug-in Manager, find the 'Editors - TinyMCE' line and click it
  • In TinyMCE options on right, find 'Prohibited elements' section and remove a mention of 'script' from it
  • Click 'Save'

 

There can be different filtering settings in different text editors plugins though. For example, if you are using JCE editor, you don't need to change any of its settings, it doesn't strip scripts by default. Please refer to the documentation of the plugin you use. 

3. Use the 'HTML' mode when pasting the javascript codes into HTML.

No matter what editor you're using, when trying to insert a javascript code you need to switch the editor into the HTML mode first - look for HTML button or tab somewhere around the editor area. With that mode the codes that you enter into editor are to be treated as exactly the codes and should work. Joomla administrator interface sometimes also features a button reading 'Toggle editor' below the actual editor - you can switch from WYSIWYG into the code editor by hitting that button:


 

By using the abovementioned recomendations, you'll be able to make Javascript codes work inside your HTML sources in Joomla. If, however, it doesn't help, please feel free to create a new thread on our forums and we will try to help you.

Was this article helpful?
1 out of 3 found this helpful
Questions?
Get help
  • Presales Chat

    Need help choosing the right Ecwid plan? Our Sales team has the answer you’re looking for.

  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7