Professional and Affordable Web Design

0800 080 5401

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 panelFCK Editor control panel

This is the text entry area of the FCK editor:

FCK Editor text entry areaFCK 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 isn’t stuffed full of unwanted code – simple HTML should look like this:
Simple HTML without Microsoft codeSimple 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 WordText 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 FCKEditorView source button in FCKEditor

The source button when clicked reveals a lot of code

Junk Microsoft codeJunk 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 buttonPaste from Word button

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

Paste from Word panelPaste 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 iconsImport text icons
  • Paste. A regular paste button
  • Paste from plain text. A paste from other document type button

The Save button

Save buttonSave 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 FCKEditorAdding a Hyperlink with FCKEditor

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

Hyperlink control panelHyperlink 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, don’t 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 iconAnchor 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 EditorAnchor 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 hereSelect anchor text link here

Hit ok, and the anchor will be active. Click on the submit button and then check the link works correctly on the live site.

Email
Click here to add an email link. Select this, and enter the destination email, ie: info@somewhere.co.uk

Comments4 Comments

پروژه های کارآفرینی

Hello This Article is very UseFull. thanks. پروژه کارآفرینی www.bitasoft.ir

20 July 2009

Rob

Really useful article. Would be good to extend it to include image uploads. Thanks

20 April 2010

Marcia

I found it very helpful and simple to read.

01 May 2010

gus gando

nice review. dont mind if we refer perople to you to learn the program.

23 August 2010

All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.

Make a Comment

Notify me when someone responds

Quick Contact

See Full Portfolio Some Of Our Work

Screenshot of dsbs.co.uk website
dsbs.co.uk

Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...

Screenshot of countysecurity.co.uk website
countysecurity.co.uk

County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...

Customer News & Resources

At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.

Introduction to sitemap.xml

Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »

Center a web page in CSS

One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »

-