ColdFusion Muse

Tiny MCE Editor and Farcry

Here's a tip on controlling editing in Farcry using TinyMCE. TinyMCE is the default editor. It's a great web-based editor from Moxiecode. It has a dizzying array of features - which can sometimes be a problem. One of the tenants of a CMS system is that you are trying to control the look of the site and give control of the content of the site over to content contributors. If the editor supports too many options it gives too much control to the contributor. What is needed is a way to limit the number of options available. You can certainly do that with tinyMCE. You can get rid of most of the buttons for formatting for example. But this will mean you end up with plain Jane text (with my apologies to Tarzan). What you really want is not to make your contributors boring. Instead you want them to use the styles that you created. That's where CSS comes in.

Here's how I do it (you might have a different take). First, I poor through my CSS files and extract the classes and I want to use into a separate CSS file. I also include base styles for common objects like p, h1, h2, hr etc. Keep in mind as you figure out what classes are in your site's CSS that sometimes they are hidden. For example, many css layouts use an ID selector called #content that contains classes. This is done to limit the effect of the classes to just those items in the #content div tag. So the CSS might look like this.

I usually remove the #content part for the sake of my generic "class" css that I'm going to use for my editor. So my new CSS file contains the "myClass" class without the #content selector - like this: Once I have all the styles I want in classes, the next step is to build a semi-colon separated list of classes to use in the INI file. I walk through the new css file and create a name value pair with a friendly name on the left and the actual class name on the right. Make sure and get the case right as well (sometimes easy to miss). When I'm done building my list it my look like this:

Big Red box=bigRedBox;Blue Headline=blueHead;Call Out=callOut;

Edit the INI file

The final step is to edit the INI file and test it. Log in to the Farcry webtop and click on the Admin tab and choose the "config files". Select the TinyMCE file and you will see a list of properties that looks like this.

theme : "advanced",

width: "100%",

height: "400",

plugins : "table,advhr,advlink,preview,zoom,
searchreplace,print,...",

theme_advanced_buttons2_add : "separator,forecolor,
backcolor",

theme_advanced_buttons2_add_before: "cut,copy,paste,
pastetext,....",

.....

theme_advanced_styles : "style 1=style1;style 2=style2",

content_css : "/css/main.css",

inline_styles : true,

relative_urls : false,

remove_script_host : true,

You are going to change 2 items. You will change the "advanced styles" item to your new list and you will change the content_css item to point to your new CSS file. Your new INI content should now resemble this:

theme_advanced_styles : "Big Red box=bigRedBox;
Blue Headline=blueHead",

content_css : "/css/maintinymce.css",

inline_styles : true,

relative_urls : false,

remove_script_host : true,

Testing

Now to test. Go to your site tree or a content item that uses the editor and select the body to edit. You should see your styles listed in the "styles" drop down box. Select some text and apply a style. It should change to reflect that selected style. If it doesn't, then something is mis-configured. To debug try this. At the top of the INI content add this:

debug: true,

theme : "advanced",

width: "100%",

height: "400",

Then reload the editor page. It should give you a JavaScript popup that includes the path to your content CSS file - along with some other useful information. Make sure and disable it once you figure it out. It quickly becomes annoying. Happy editing.