WYSIWYG Lifesaver brought to you by META Q

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


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

Figure 2


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


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

Figure 4


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


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


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

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


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


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.



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.


Image Source: Marcus Hansson

Laura Riegel's avatar

Laura Riegel

Print and Web Designer at Q Digital Studio

Laura Riegel is Q Digital Studio's print and web designer, originally hailing from Kentucky. She happily calls Colorado home, as Denver perfectly suits her hobbies of skiing, camping and mountain biking. Equal parts creative and practical; Laura loves the challenges and joys of both designing and coding.




Code > MojoMotor > Tips > Code Tips




What others are saying


Wow! Have I said enough times how great this is? No? THIS IS AWESOME!

Laura Riegel

Thanks so much for the positive feedback!


Hey Laura - Thanks for writing this article! I’m going through it right now to customize my editor for a MM site.  One question though… in the future, could we have the code samples as code samples instead of images? :-)

Thanks again!

Laura Riegel

Thanks for the suggestion!  I will work on incorporating that change in future articles.


Thanks for this article. A friend has asked me to pull together a quick site for her and I’m seriously considering Mojomotor as it will allow her to change text and images (via Thumbjump) whenever she wants to going forward.


Laura, have you been able to modify the “Create Div Container”. I read the docs: http://docs.cksource.com/CKEditor_3.x/Users_Guide/Layout/Div and tried different ways to “defined some additional styles in the default.js file for the styles plugin” with no luck…

Laura Riegel

Hi, Juan, I haven’t tried putting styles on div containers before via the wysiwyg editor.  I saw you posted your question on the MojoMotor forums.  (http://mojomotor.com/forums/viewthread/201587/) I am curious if they were able to provide you with a solution and if so would you mind sharing.


Apparently they (MM) have upgraded the issue (the Div bug) as a developer problem. That’s good but it seems it will take some time. BTW, on this great tutorial there’s a tip missing, if I may add: once you change the .js clean Cache on your browser or you’ll be spinning for a while (believe me, I just spend an hour figuring what was wrong).

Laura Riegel

Thanks for the update on the Div bug, and yes, clearing your cache is always good tip!

Speak your mind