Jonathan Rowny

People are never satisfied with WYSIWYG plugins. One of the biggest frustrations, especially when working with an Administration theme, is that what appears in the editor is NOT the same as what appears on the website. And the "preview" button does no good either. For instance, if you've got custom spacing, list styles, or specific classes for typography, you're not going to see them in your WYSIWYG editor, and therefore, what you see is not what you get.

So how do we fix it? These instructions assume you've got WYSIWYG API setup as well as at least one editor enabled. For our example, I'll be using TinyMCE.

1. Create an editor.css in your theme wherever your other CSS files are
2. Edit the "editor.css" file and add @imports to your normally included CSS styles. You don't need to include print.css but you would need to include any resets, typography, or color files you normally include. See here for a good example of how to import other CSS files. Now your editor.css will have all your normal website styles!
3. Where does this content go in your layout? My content ends up in a div with the ID "content". Where does TinyMCE content go? Right in the body! In the case of TinyMCE, the id tinymce is added to the body. You need to add the SAME styles to #tinymce as you had in #content. Do this in editor.css after the imports. Example:
   

   /* Example editor.css */
   @import url("reset.css");
   @import url("typography.css");
   @import url("style.css");
   
   /* overrides to make tinymce match #content */
   #tinymce {background:#fff; padding:10px;}
   

4. No go to site configuration->WYSIWYG and edit your profile. Under the "CSS" area, select "Define CSS" and put "%bsites/all/themes/YOURTHEME/css/editor.css" for the css path. (tested only for TinyMCE)
5. Notice that you can also define some custom classes which users can use, these classes must be defined in your theme's CSS, not in the editor.css. If you're import was done correctly, it'll get picked up by editor.css anyway.

If all went well, your editor's input area should be styled just like how it's output. Now what you see is really what you get!

In general, I don't really care if a website passes validation so long as it looks okay and performs well. While teaching an XHTML class a few months ago, I was randomly typing things into the W3C validator and discovered that BBC validates perfectly on XHTML 1.0 Strict. For a site that large, that's very impressive! I decided to do a comparison of similar sites.

Well, I finally cracked and got a twitter account. follow me at @jrowny.

Here is a link to today's presentation. And here is a link to a post with the code snippets.