Configure the TinyMCE Editor in Joomla! PDF Print E-mail

If you are looking for more (or missing) functionality from your TinyMCE editor in Joomla! this might be the information you are looking for.

I have worked on a few different versions of Joomla! and when I installed the most recent version for this website, I noticed that when I went to add or edit an article, there were only a few toolbar buttons in my WYSIWYG (TinyMCE) editor. On other installations there were four rows of buttons, but this one only had 2, and I was missing alot of the functions that I use frequently. Luckily I found that this was just a configuration setting and is easy to change using the Joomla! Administration pages.

You can configure the TinyMCE WYSIWYG HTML Editor for your Joomla! installation by logging into the administrator interface, and opening the Plugin Manager

Extensions > Plugin Manager

Locate the Plugin named Editor - TinyMCE and open it for editing. You will see the configurable parameters on the right hand side of the screen. Following is a list of some of the configurable parameters, and how they will affect your TinyMCE Editor.

  • Functionality: The options are Simple, Advanced and Extended, I believe that the default for a newly installed Joomla! system is the Advanced Selection.
    • Simple: Selecting the Simple option will only give you a few text formating options; Bold, Italic, Underline and Strikethrough. You will also have the Undo and Redo buttons, Code Cleanup, and Bulleted and Order List buttons. The toolbar buttons will be located at the bottom of your HTML Editor in Simple mode.
    • Advanced: (Default) The Advanced option gives you a good deal more items than the Simple option does. This option adds Alignment, Text Styles and Formats, Indent and Outdent, Anchor (hyperlink), HTML Source Editor, Image, Superscript and Subscript buttons to the toolbar. The toolbar buttons are located at the top of the Editor area when set to the Advanced option.
    • Extended: The Extended option gives you the most functionality of the 3 settings for the TinyMCE plugin. Adding features such as Find and Replace, Text Color and Highlighting, adding Emoticons, Embedded Media, changing the text direction, tables layers and CSS styling from within the TinyMCE editor. For a full featured WYSIWYG HTML Editor, set the TinyMCE Functionality parameter to the Extended option.
  • Skin: The Skin options are used to modify the background color of the TinyMCE Editor area. Options are Default (grey), Blue, Silver and Black.
  • Compressed Version: This setting allows the TinyMCE Editor to load slightly faster, however it may not function correctly with all web browsers.
  • Code Cleanup on Startup: Selecting 'Yes' to this item will perform code cleanup, or modify the HTML source of your content to remove any unneeded elements/attributes, and attempt to standardize the output. However if use this option, you may lose some important elements or attributes of more advanced code items. I suggest leaving, or setting this item to 'No'.
  • Code cleanup on save: This performs the same function as the previous item, but the cleanup happens when you save your content. The default setting for this parameter is 'Always', and I would recommend setting it to either of the other choices. If you select 'Never' then your code will not be modified when you save your document, and selecting 'Front Only' will perform the cleanup when a user adds or edits an article using from the website directly. You can set both cleanup items to 'No' or 'Never' and still use the code cleanup manually from the editor using any of the Functionality settings.
  • Entity Encoding: This item determines how HTML Entities are processed by the editor, it is safe to leave this setting as raw.
  • Automatic Language Selection: If you set this item to 'Yes' the TinyMCE language setting will automatically be set to the selected User Interface langage selection. If you do not have any editor languages installed, do not activate this item.
  • Editor UI Language: This is the language setting for the Editor, if you have not installed additional languages for the editor, you should leave this setting at its default value.
  • Text Direction: Change the text direction of the TinyMCE Editor interface, either Left to Right, or Right to Left.
  • Template CSS Classes: This allows you to set whether the Editor should look for an editor.css file to load. If the file is used, the content typed in the editor window will use styling from the CSS file.
  • Custom CSS Classes: This allows you to specify a CSS file to be loaded to style the content within the editor window.
  • URLs: This item determines how the URL of an inserted link or image will be formatted.
  • New Lines: This allows you to select which HTML Element(s) will be used to create a new line (line feed) in the WYSIWYG view of the TinyMCE Editor.
  • Prohibited: Allows you to list which elements will be removed from the content automatically.
  • Extended Valid Elements: Allows you to add valid elements to the existing rule set.

Under the Advanced Properties you can set the Editor's toolbar position and alignment, height and width. And if you have selected Extended as your Functionality setting, you will be able to further customize which buttons appear in the TinyMCE Editor toolbar.