Wiz CMS Tutorials

Rich Editing with Custom Classes

Video Tutorial

What is meant by "custom classes"?

The Wiz CMS rich HTML editor can do a lot of neat things. Like most rich text editors it can bold, italic, insert links, make headers and paragraphs, block quotes, and all sorts of neat stuff like that.

However, what if we want to do more than that? What if we want to implement custom CSS classes for the editor to allow users to select and use...like alert boxes, or buttons, or a wider array of quote styles, etc? With Wiz's rich editor you can do exactly that.

In the Wiz Rich Editor CMS File

In the given index.php file that we've been using to set up text editing there are places where you can implement these custom classes. To do so takes editing it in 2 spots and having a tiny bit of novice JavaScript knowledge (basically the ability to know how to write out an array or object in JS).

Step 1

Not far below where you turn the WYMeditor on you'll find a variable named $classesForWYMeditor. It's currently just a blank string. We're going to fill that string with text that the PHP will then print out for JavaScript. That text will be a JavaScript array of objects. If you know how to make an array in JS using [] and an object using {} then you should be good to go in the "JavaScript knowledge needed for this" department.

The end product will be a JavaScript array where each entry is an object with a "name", "title", and "expr" property. Keep in mind that we're still in PHP...so we're going to make it a string (surrounded with quotes). It's only once the PHP prints it out into JS that it'll truly become an array. An example would look kinda like this for a single entry:

$classesForWYMeditor = "[{name:'alert-box', title:'Alert Box', expr:'p, span'}]";

Once you set this a drop-down menu will appear in the rich editor allowing the user to select an option "Alert Box". When the user does so it will apply a class "alert-box" to the user's selected element. But it will only allow them to do this on HTML tags matched by the selector expression p, span (so in this case only for a <p></p> or <span></span> type element). You can use "*" in the "expr" property if you want it be be applicable to anything.

Step 2

Technically it's now working. The user can apply styles from the rich editor and (assuming you actually defined some CSS for that style in your site) it will show properly in the site when used.

However, it's still a little hard to use in the editor because there's no styling applied in the editor. The editor is just adding and removing a style behind the scenes. To the user in the editor it looks like nothing is changing, and that makes it hard to use. But that's because we're only half done.

The next step is to go down to the next variable, which is the $stylesForWYMeditor variable. Here we'll define some CSS that only the editor will use to represent your class within itself. You don't have to make it look just like the element in your website, just a good enough representation that the user can figure out what has that style applied to it and what doesn't.

Like before we're going to make a JS array of objects (that's actually a PHP string). You'll also notice there's already a couple defined by default to make the editor look a certain way for us. We're just going to add to that.

$stylesForWYMeditor = "[
    {name:'html,body', css:'background: #fff !important;'},
    {name:'*', css:'font-family: Helvetica, Arial, sans-serif;'},
    {name:'.alert-box', css:'color:#ff0000; padding:10px; border:1px solid #ff0000;'}

The one we added was the third one. Notice that for "name" we put the selector to the style we want it to apply to, and for "css" we put our actual CSS properties. So for here we made it so that every time the user makes an element within the editor into an "Alert Box" it turns that element's text red, makes it have a little padding, and then gives it a red border. Basically making a little ugly representation of an alert box within the editor. Your website's alert box may need to look pretty, but the editor is all about utility. Just make it easy to distinguish what it is!

In Review

Keep in mind that the way this is set up you have a different CMS instance for each bit of text. That means you can control what classes are available separately for each bit of content. Don't overload your users with classes they won't need for that bit of content. You can make editing simpler by just including classes intended for that area of the site.

Tutorial Menu Next Tutorial ❯