WYSIWYG Lifesaver brought to you by META Q
Interior Ad 3 brought to you by The 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

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.

 

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.

Posted

4.26.2011

Categories

Code > MojoMotor > Tips > Code Tips

Tags

mojomotor

9 comments >

What others are saying

Juan

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

Laura Riegel

@Juan
Thanks so much for the positive feedback!

Jesse

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

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

Euan

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.

Juan

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.

Juan

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

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


Speak your mind