Development
How to preserve UIkit attributes in Joomla TinyMCE
Joomla sites using TinyMCE can preserve UIkit attributes in article markup by adding div[*] to the editor’s Extended Valid Elements setting. The adjustment prevents TinyMCE from removing attributes such as uk-grid when content is switched…
The issue appears when an article needs a small piece of layout markup rather than ordinary formatted text. A UIkit grid with three columns, or buttons spanning the available width, can be entered by switching TinyMCE to the “Editor Off” or code-editing mode. However, returning to WYSIWYG mode causes TinyMCE to validate the markup. Without an appropriate rule, a fragment such as <div uk-grid> can be reduced to <div>.
Changing the TinyMCE validation rule
The setting is available in the Joomla administrator interface under System > Plugins > Editor - TinyMCE. On the first tab, locate the parameter named Extended Valid Elements. It is empty by default. Add the following value:
div[*]Here, the rule applies to div elements and permits their attributes to remain in the content. After saving the plugin configuration, UIkit markup entered in an article can pass through the editor without losing the attributes required by the layout.
The setting is intended for small, occasional code fragments inside an article. Other approaches include creating a shortcode with Revars, installing a code-insertion extension such as Sourcerer, switching to CodeMirror with an editor toggle, or placing a module inside the article. Those options can add workflow or maintenance overhead when only a short piece of markup is needed.
The same method can be applied to other HTML tags by adding corresponding rules to Extended Valid Elements. The example specifically covers div elements and the UIkit uk-grid attribute.