Introduction to FCK editor

This is a tutorial on how to use some of the basic functions relating to text and links.

What is FCK editor?

FCK editor is an open source text editor, that is often built into content management systems. It gives clients an easy to use and familiar way to enter text and images into their websites.

FCK editor includes many features found on desktop editors such as MS word to be used for the instant editing of a specific area of a web page.

Here is a typical FCK editor control panel:

FCK Editor control panel

This is the text entry area of the FCK editor:

FCK Editor text entry area

How to use the text entry area

Entering text into the text panel could not be simpler, you can copy or paste text into the text area, or simply type in to the panel.

Typing directly into the panel gives you a limited set of options with regard to font, style, boldness of text and alignment. You can add bullet points, numbered lists and increase /decrease the font sizes. You can choose the colour of text, and its background colour.

We strongly suggest taking some time to familiarize yourself with all of the controls and the effects they have on the live page.

If you get stuck - just hit the new page button on the FCK editor toolbar and any unsaved changes will be discarded.

With regard to copy and pasting text there are a few things to take note of.

The text entry panel is a WYSIWYG editor and as such any text imported directly from word can have erroneous HTML attached to the text.

Rule 1: Never import text via copy paste directly into the text entry panel.
Rule 2 : Always use a Paste from. icon
Rule 3 : Always use the source button to double check the HTML code isnt stuffed full of unwanted code simple HTML should look like this:

Simple HTML without Microsoft code

Importing text into the text panel from Word

The panel below shows a line of text imported directly from Word looks fine:

Text pasted in from MS Word

However, click the Source button found in the top left corner of the FCK editor control panel:

View source button in FCKEditor

The source button when clicked reveals a lot of code

Junk Microsoft code

As you can see, the amount of HTML inserted along with the text is large and over blown and will cause major issues when viewing the text on a web page.
Microsoft Word, Microsoft Office and other similar applications add their own code when copying and pasting into any HTML editor; this makes formatting the text almost impossible once inside the text panel of the FCK editor. The only way forward is to either manipulate the HTML code not good if you do not understand HTML or you can wipe the page clean and start again using the following steps.

If you cannot manipulate the HTML code and if you make this type of mistake its easiest to use the New Page icon to clear the HTML quickly and thoroughly.

The New page button removes all previous text and images from the text panel. Its a quick way to reset a page to a blank state. It presents the user with a clean canvas to add text to - free of any html.

Use the Paste from word button to prevent adding junk Microsoft code.

Paste from Word button

When you click on the paste from word icon this panel appears:

Paste from Word panel

To use this:

Highlight the text in your word document
Press CTRL + C to copy the text (or use copy in Word)
Click inside the panel above
Press CTRL + V to paste the text into the panel
Click ok to place the text into FCK editor text panel
ALWAYS SAVE after loading in

Import Text button

You can import text via the paste from word icon, or these other two icons:

Import text icons

Paste. A regular paste button
Paste from plain text. A paste from other document type button

The Save button

Save button

The Save button saves the latest edits in the text panel.

Always save changes before logging out of the CMS

You can also save by clicking the Submit button underneath the text entry panel of the FCK editor.

How to add a hyper link

Firstly, highlight a word or phrase within the text page like so

Adding a Hyperlink with FCKEditor

When you click on the Hyperlink Icon the following control panel appears

Hyperlink control panel

This next section explains each area of this panel

A) The Target tab.
This sets how a linked to page behaves when the link is clicked.

If you are linking to a page on your own website, dont set the target.
When the link is clicked, the page will open in the same window.

If you are linking to another website, you may wish to select blank.
When the link is clicked, another window will open and load the target webpage. Many users prefer this behavior, as their own webpage does not shut down when visitors visit another website. It is up to you!

B) Link Type
Available options are URL, Link to anchor, Email

URL link option
Simply means the link will open another web page.
[url link options]

Enter the URL you want to link, eg. www.mutinydesgn.co.uk
This will make the highlighted text act as a link to the selected page.

Link to anchor in text

Useful for adding back to top of page links.
The Anchor Text function is found on this button:

Anchor text icon

Anchor text is used on long web pages with lots of scrolling, it enables browsers to return to either the top of the page or to a specific part of the page.

Anchor text is used in conjunction with the hyper link function button.
Firstly you need to highlight the text you want to anchor, or bring a potential browser back to ( for example the top of the page)
Once highlighted click on the anchor icon and this box will appear

Anchor properties box in FCK Editor

Name your anchor and hit OK (names like Anchor1 are ok), the box will disappear.

You then decide from where on the page you want the link back to the anchor. Highlight the text selected then click on the Hyperlink button, choose the link to anchor in text option.

This box will open and you can select the Anchor name from the drop down list (it knows what you called all of your anchors)

Select anchor text link here