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:
This is the text entry area of the FCK editor:
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:
Importing text into the text panel from Word
The panel below shows a line of text imported directly from Word looks fine:
However, click the Source button – found in the top left corner of the FCK editor control panel:
The source button when clicked reveals a lot of 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.
When you click on the paste from word icon this panel appears:
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:
- Paste. A regular paste button
- Paste from plain text. A paste from other document type button
The 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…
When you click on the Hyperlink Icon the following control panel appears
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 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
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)
Hit ok, and the anchor will be active. Click on the submit button and then check the link works correctly on the live site.
Click here to add an email link. Select this, and enter the destination email, ie: firstname.lastname@example.org
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
See Full Portfolio Some Of Our Work
Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...
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 »