Visual editor mode – TinyMCE WYSIWYG?

When writing a post in WordPress you can choose between writing in either Visual or Code mode. This implies a distinction between those who know code and those who don’t. Another good example of this tradition in software can be seen in HTML editors such as Macromedia Dreamweaver with a Code and Design mode. Dreamweaver adds another category namely that of the Split mode which give the user a view of both worlds (see picture). This addition is actually quite useful for people who are not actually coders and prefer to make the basic design in Design mode but know enough about code to fine tune the design in the Code mode (more on Visual editor mode versus Code mode soon)

The Visual mode in WordPress is supplied by TinyMCE which has made a Javascript WYSIWYG (What You See Is What You Get) editor, but is it really WYSIWYG? When writing a post in the visual editor style changes such as bold or italic are immediately visible but the layout of eg paragraph text follows the standard settings of the WordPress Visual editor. To see what the post will actually look like when posted on your blog you have to scroll down to Post Preview which is updated when a post is manually saved. The Post Preview function box us what the post actually looks like when the stylesheet is applied to the document.

When writing a blog post in WordPress you can just use the visual editor and your WordPress Theme will automatically add its stylesheet to it. You can change the properties of your layout in the stylesheet if you have knowledge of CSS. Due to the hierarchy of formatting the stylesheet will always overwrite what you see in the “WYSIWYG” visual editor of WordPress so what you see is not quite what you get.

WYSIWYG? (before) & WYSIWYG! (after)