WYSIWYG Lifesaver

Laura Riegel / Posted 4.26.2011

WYSIWYG Lifesaver


It’s been almost two months since I built my first MojoMotor site. Throughout the process, I have learned a few tips and tricks to help me get by. Some of the tips I’d consider more as lifesavers.

In fact, this particular one is really more of a life preserver. Strap this baby on and stay afloat by adding your own styles to the WYSIWYG editor.

Normally the MojoMotor editor looks similar to Figure 1, with only the default editing features.

Figure 1

WYSIWYG LIFESAVER

To add your own customized styles like in Figure 2, follow the steps below.

Figure 2

WYSIWYG LIFESAVER

First, open the ckeditor.php file, which is located inside the system > mojomotor > config folders.

In the file, add 'Styles' to the wysiwyg_toolbar array.

Figure 3

WYSIWYG LIFESAVER

Once the site’s page is refreshed, you can see the added Styles drop-down menu with its default styles.

Figure 4

WYSIWYG LIFESAVER

To include your own customized styles, I recommend first adding the classes to the site’s style sheet. For example, if you want the client to have access to defined font sizes and a customized arrow list style, your CSS will look similar to Figure 5.

Figure 5

WYSIWYG LIFESAVER

To list these styles in the Styles drop-down menu, you will need to update the default.js file. This file is located inside the system > mojomotor > javascript > ckeditor > plugins > styles > styles folders.

When opened, it will look like Figure 6.

Figure 6

WYSIWYG LIFESAVER

By referencing CKSource Docs, you can remove the default styles and add the various inline and block classes.

Tip
CKSource Docs distinguishes how to register block and inline elements so make sure you are following the right example.

To implement the font sizes and arrow list style from the example we are working with, the code should look like Figure 7.

Figure 7

WYSIWYG LIFESAVER

Tip
Notice how the Arrow List is set up as a block element, and the various font sizes are inline elements. Inline classes work by adding a <span>. If you want to add a style to a <ul> , <p> or any other block element, you must list that style using the Block-level styles and make sure your element is defined as the correct block element. For example, the Arrow List element is set to a <ul> .

The final result is a drop-down menu with customized styles.

Figure 8

WYSIWYG LIFESAVER

Tip
Notice how the Arrows List style isn't showing up in the drop-down menu. The reason is block styles won’t appear in the Styles menu unless you have that particular block element selected in the editor. In order to use the Arrow List class, you first have to make a list. Then once the list is selected/highlighted, the Arrow List class will show up in the Styles drop-down menu.

Once applied, the client has some nice customized features to use in the WYSIWYG Editor.

Figure9

WYSIWYG LIFESAVER

Everyone flounders once in awhile, but it’s nice to have a few tips and tricks up your sleeve to help keep you afloat. We’ve got plenty more to share – we’ll help you keep your code buoyant.