A Great FREE Editor for Your Website!

Anyone who has customized their site any knows that the default editor is not very feature rich. Well, did you know that you have other editors available in your system and that you can even add more?

I am going to tell you about two editors that are VERY robust and include easy image, flash and media management. Easily link to any content, menu item or component on your site, and in one, even see the style sheet being used by your site to control fonts and such.

We will cover the first editor in this article and I will write another after I have reviewed the other editor a little more.  If you wish to check it out and let me know what you think, the editor I will review in the next article will be JCE.

Now, I have been using an editor called WYSIWYG Pro 3. It is a commercial editor, so I paid for it, and it is good, but I wanted to find something for our customers and that I could include in our new installs that was more robust and allowed easier image management, link placement and styling then the default editor. I will ditch the commercial editors for one of these most likely.
 

The FCK Editor

The FCK editor is FREE and can be downloaded from http://www.joomlafckeditor.com/downloads as a single component.

The FCK editing panel has a lot of features and a lot of it looks very much like Microsoft Word in a many ways, as seen in Figure 1, so most of it will look familiar to Word users. Also, this editor even has form elements like radio buttons and text boxes to build forms. This is nice if you want to build a custom form for chrono forms or one of the other forms components.

In the editor, you can also see the various style sheets that your website uses for fonts and other styling elements. Your website font and textual look is primarily determined by this style sheet, and the styles it contains. Style sheets are used by designers to provide a nice consistency across all pages unless you override the styles by changing fonts, sizes and colors in your editing to something other then what is in the style sheet. For instance a large heading with bold will be an H1 tag in the style sheet.

If you want a large bold heading for your site, and to remain consistent, you would pick the H1 style from the styles for your headline text. If you don’t and make a custom font, custom sized font or other customizations; it could end up looking different across pages.

Figure 1: FCK Editing Panel

So unlike the default editor which only includes some basic styles, this editor will let you pick from all the styles in the style sheet your site uses giving you the ability to pick from the style that  keep the site as it was designed aesthetically ,  or customize them to how you see fit.

FCK Images and Placement

This editor has a very easy to use interface for uploading, picking, and placing your pictures, graphics, flash or other media files. When you click on the add image button, a dialog pops up lioke the one in Figure 2 that allows you to browse images currently in your websites image directory, or upload new images from your computer.

Figure 2 FCK Image Panel

It allows you to size and add other elements and even gives a preview of how it will look placed in your text. 

When you browse for images already on your website, a new image manager opens like the one in Figure 3, so you can browse current images or upload more.

Figure 3: FCK Image Manager

 I really like the media manager in FCK. It is very wasy to upload images and flash. In fact I really like FCK and probably won’t go back, but I have not tried our other editor yet, so I may not stick with FCK long either.

Linking

WYSIWYG Pro 3 is the best system I have seen for creating links in an editor. It pulls up a dialog that shows you all your menus so your text can link to a menu item that you pick from the dialog, or it presents a list of all your articles, or you can make an external link. I really like it.

FCK is not as robust, but it is better then the default editor. All you do to link to internal documents is start typing the first few characters of the document title and it will show you a list of documents on your site that match those characters. There are several ways to tell what a document title is. The easiest way is to display the page on your website and look at the top most left corner of your browser window. That is the document title. Look at figure 4. below. It shows the upper left hand corner of the Internet Explorer with the page title.

Figure: 4 Title

To link to a document, type the first few characters from the title and a list will appear in the FCE link dialog, as shown in Figure 5. Just pick an article from the list and you internal link is created. External links are as you would expect. Type in the url for external links.

Figure 5 Linking.

That covers the major points about the FCK editor. It is a big improvement on the default editor. You can download it from http://www.joomlafckeditor.com 


STEP 1:
To install it, download the zip file to your local computer.

Log into your website administrator. Go to Extensions-> Install/Uninstall in the Menu.
Click browse, find the zip file, and click select or ok.
Click Install.

 The editor is installed. Now you have to enable it.

STEP 2:
Go to Extensions-> Plugin Manager

Look through the list of plugins for FCK editor and if there is a littlee red circle with a white x to the right of it, click it to enable the plugin.

  Now all you have to do is go into the user manager, click yourself or administrator, and choose FCK as your default editor.

STEP 3:
Now go to your article manager and click on a new article or edit a current one to try out your new editor.