How To Add HTML or JavaScript Code to Joomla

IMPORTANT: Joomla's default text editor (TinyMCE or JCE) may strip out HTML or JavaScript for security reasons. You need to switch to the code editor to add your custom code.

Toggle the Editor

  • If you're using TinyMCE, click the "Toggle Editor" button beneath the article content box. This will switch from the WYSIWYG editor to a plain text editor where you can safely add HTML and JavaScript code.
  • joomla custom html to articles switch editor joomla custom html to articles switch editor
  • If you're using JCE or another editor, there might be a similar button or option to view the source code.

Or you can also change it in Global Configuration.

  • Go to "System" > "Global Configuration".
  • Under the "Site" tab, look for "Default Editor" and try another editor from the list.
  • how to add map configuration editor how to add map configuration editor
  • Also, try navigate to "Text Filters" and change "Filter Type" to "No Filter". Only for Super Admin.
  • how to add map text filters how to add map text filters
  • Click "Save & Close".

Add HTML or JavaScript Code

In the plain text editor, you can directly write or paste your HTML code. For example:

joomla custom html to articles editor joomla custom html to articles editor
joomla custom html to articles styles joomla custom html to articles styles

Or You can also add JavaScript within "script" tags. For adding JavaScript it's better to change Editor in GLobal Configuration to "Editor - None" if you have any issues.

joomla custom html to articles javascript joomla custom html to articles javascript
joomla custom html to articles js frontend joomla custom html to articles js frontend

After adding your HTML and JavaScript, click "Save" or "Save & Close" to save your changes and exit the editor.

Configure the Text Editor (If Necessary)

  • Go to "System" in the top menu.
  • joomla custom html to articles to system joomla custom html to articles to system
  • Under the "Manage" section, click on "Plugins."
  • joomla custom html to articles to plugins joomla custom html to articles to plugins
  • In the search box, type "TinyMCE" to find the TinyMCE editor plugin.
  • joomla custom html to articles tinymce settings joomla custom html to articles tinymce settings
  • Click on the "Editor - TinyMCE" link to access its settings.
  • Under the "Prohibited Elements" section, remove any elements that you want to allow (e.g., script, iframe).
  • joomla custom html to articles prohibited elements joomla custom html to articles prohibited elements
  • This way you can enable HTML code.
  • Adding iframes in Joomla

    You can also add iframes to Joomla articles or custom HTML modules. Adjust the text editor settings to allow iframes and add it into your content.

    joomla custom html to articles iframes joomla custom html to articles iframes
    joomla custom html to articles map joomla custom html to articles map