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.

<style type="text/css">    
    #content.myClass {
        padding: 0 100px 10px 0;
         width: 455px;
         height: 46px;
         font-size: 9pt;
         color: #0061aa;
        border-bottom: 1px solid #ccc;
    }
</style>
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:
<style type="text/css">    
    .myClass {
        padding: 0 100px 10px 0;
         width: 455px;
         height: 46px;
         font-size: 9pt;
         color: #0061aa;
        border-bottom: 1px solid #ccc;
    }
</style>
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.

Comments
Geoff Bowers's Gravatar Looks like a great addition for the FarCry WIKI :) http://docs.farcrycms.org:8080/confluence
# Posted By Geoff Bowers | 10/31/06 4:07 PM
Knut Bewersdorff's Gravatar Sorry, it seems, that it does not wok in FarCry-4.0.9-Milestone !

I can't get it working. No Styles are in the TinyMCE "Style"-DropDown-List !

Any hint to get it working ?

Best regards
Knut
# Posted By Knut Bewersdorff | 12/2/07 9:36 PM
Jake's Gravatar @ Knut:

Could you either post here or email me your tinyMCE config? That would tell me more. My initial thought is there is a path wrong or name incorrect in there.

Also, keep in mind that CSS is case sensitive.
# Posted By Jake | 12/3/07 10:15 AM
Knut Bewersdorff's Gravatar Hi Jake,

after hours and hours, I decided last night to tried it with the "richtext.cfc", which is described under: http://docs.farcrycms.org:8080/confluence/display/...

It works nearly perfect (95%). I hope, that I'll find a solution for last 55% today. If I can get it work, I'll post it.

Best regards .. Knut
# Posted By Knut Bewersdorff | 12/3/07 11:35 AM



Blog provided and hosted by CF Webtools. Blog Sofware by Ray Camden.