WYSIWYG editing in Joomla 5
Joomla 5 introduces Fontawesome 6.4, and already has Bootstrap 5, but it can be a pain to preview what your article might look like with Bootstrap styling and Font Awesome Icons. JCE Pro fixes that, with one simple profile configuration change which enables What you see is what you get, (WYSIWYG) editing in Joomla.
Example - Font Awesome fa fa-joomla in article text
Example - Font Awesome fa fa-joomla in a button
For all kinds of good historical and practical reasons, Joomla can be a little bit impenetrable. Joomla standardised on Bootstrap and Font Awesome several releases ago, however the editors provided as standard don't really understand and let you take advantage of the functionality provided by BootStrap and Font Awesome easily. Fortunately, there are some easy fixes. For TinyMCE it is simple make an adjustment to avoid the Icons being stripped out of Joomla articles. That goes a long way towards making it easier to use Font Awesome tags, but it isn't exactly WYSIWTG.
But how about being able to preview your article nicely before an article is published? One way to do this is to use JCE Pro, the Pro version of the Joomla Communuity Editor, built upon TinyMCE. JCE Pro is a £30 plus VAT annual subscription, which gives you unlimited site use forever for the version available up until the end of your yearly subscription. It has several plugins which are so useful as to make it a no brainer. It suits my workflow as I like to keep articles unpublished untit they are done. It reminds me of Netscape Communicator - the original WYSIWYG HTML editor.
TL:DR: Try out the free version for a while and see if you like it first, but the ability to move between code, editor and preview and see my articles exactly how they will look when I publish them is well worth £30.
Installing JCE Pro
Installing is simple, go to their website, register, buy the subscription, download the software, and install it using the Joomla Administrtor. Add the key to the settings in order to keep up to date. While you are there download and install the Font Awesome plugin plg_jce_editor_fontawesome_113.zip which makes it easier to add Font Awesome font glyphs to your articles.
Setting JCE PRo to show Font Awesome in Preview
- Go to JCE Pro in Components
- Open the profile you use (Default in this case)
- Go to Editor Profile > Editor Parameters > Typography > Editor Styles
- Change Editor Styles to 'Add'
- Add the following Custom CSS File path:
media/system/css/joomla-fontawesome.css - Save
That's it, now you will see your Font Awesome icons in the editor preview pane, and because you are using the system Joomla Font Awesome your code is template independent and will update when Joomle updates Font Awesome.
