Syncing Joomla's WYSIWYG Editor with Front End Styles

By Justin Kerr
October 09, 2010

Table of Contents

Joomla is a pleasure to use, much of which is due to the ease with which just about anyone can jump in and start managing content. The WYSIWYG editor is a key part of this, presenting a familiar, word processor-like interface that less-technical users find easy to understand.

Although Joomla's default WYSIWYG editor is adequate, most sites employ a third-party editor extension such as JCE, which delivers even more features and functionality. Another, less-common, enhancement synchronizes the display of page elements so that content inside the WYSIWYG editor looks exactly the same as it appears on the front end of the Web site. With a little thought and planning, it's easy to implement a CSS-based solution that achieves this synchronization while being easy to customize and maintain.

A number of requirements surrounded development of this technique for syncing the look and feel between the WYSIWYG editor and the front-end display:

  • The method should allow for definition of CSS content styles in one location, so that updating a content style involves editing only one CSS file that applies to both the editor and the front end of the site.
  • The method should allow for selectively overriding styles between the WYSIWYG editor and the front-end display, for cases where the difference is needed (for example, a high-contrast editor display to increase legibility). 
  • The method should take advantage of the custom style definitions that can appear in the WYSIWYG editor toolbar, and these style choices should automatically appear on the front end of the site. 
  • All of the code should be contained within a specific Joomla template so as to be portable and easy to find.

For the purposes of this article, we're using the JCE editor as an example.  However, this technique should work with any Joomla WYSIWYG editor that allows for definition of a custom style sheet.

Technique Overview

The crux of this technique involves using the @import CSS rule, which allows one CSS file to include the contents of another CSS file.  The first CSS file contains styles shared betwen the WYSIWYG editor and the front-end display of the Web site; the second file uses @import to include the contents of the first file (and also define styles only pertinent to the front-end display).  The WYSIWYG editor is configured to load the first file, and the site's template is configured to load the second (which also loads the first).  Overrides are accomplished by writing different style definitions in the second file below the @import rule.

Read on for a specific example of how this is accomplished.