How to use FCK Editor
Introduction
The FCK editor is an advanced WYSIWYG (What You See Is What You Get) editor which allows you to create and edit pages within your site without the need to learn and understand HTML programming language.
Adding Text
Adding text is easy - click in the wysiwyg content area and type or paste text. If you’re creating short pages, typing straight into the browser is OK. If your content is complex or longer, you should compose content offline, preferably in a text editor like NotePad or WordPad. You can compose content in Microsoft Word, but should save the document as a .txt file before pasting into the FCK editor. The reason for composing longer content offline is to guard against loss of work should your Internet connection drop or close during editing - if this happens before you save, any work will be lost.
Once text is added, it can be formatted, additional tables added, hyperlinks inserted, pictures or images added.Default text styles in the "Select a Style" drop down box are determined as part of your site design template, and are controlled by style sheets that are not editable via admin.
Using HTML
If you are familiar with HTML you can click on the Source button which will launch a window from where you can enter and edit raw HTML code.
Cutting Text
First select the area of text you wish to remove and add to your clip board and click the cut button. Alternatively you could use the shortcut keys (ctrl+X).
Copying text
Select text and use the Copy button to copy the selection to the clipboard which can then be pasted elsewhere.
Pasting text
After having cut or copied content, put the cursor where you would like to place the content and use the Paste button.
Paste from Word
When copying and pasting from Microsoft Word use this option. Pasting into the pop up window that appears after selecting this button will remove unwanted MS Word formatting which will complicate your content.
Print Editor Content
Click this print button to print the contents of the Editor window.
Undo
Click on the Undo button to undo a previous action. This will only work prior to saving the changes made on the page.
Redo
Click on the re-do button to repeat the previous action
Find
Search for a word or phrase by entering it in the Find window.
Find & Replace
Replace a word or phrase by entering it in the Find window together with the words you would like to replace them with.
Select All
Selects all the content in the editor window.
Remove Formatting
Removes formatting of a selection where format drop down window has been used. Select specific formatted content then use this button.
Bold text
Bold text by first selecting your text then click the Bold Button.
Italicise text
Italicise text by first selecting your text then click the Italics Button.
Underlining text
Underline text by first selecting your text then click the Underline Button.
Striking out text
To Strike through text, first select your text then click the Strike Through Button.
Subscript
Subscript text can be done by selecting your text and clicking the Subscript button.
Superscript
Subscript text can be done by selecting your text and clicking the Superscript button.
Numbered List
The Insert/Remove Numbered List Button to initiates a numbered list. To finish your list, hit enter twice.
Bulleted List
Click the Insert/Remove Bulleted List Button to initiate a bulleted list. To finish your list, hit enter twice.
Spell Check
Checks your spelling and offers correct alternatives.
Styling Content
The Style Content dropdown menu gives you a number of style options for headings and image placement. These can be customized by your website developer.
Decrease Indent
To decrease indenting of content, select your text then use the Decrease Indent button.
Increase Indent
To increase the indenting of your content, select your text then use the Increase Indent button.
Left justify text
To Align your text to the left, click the Left Justify button.
Centre justify text
To Centre text, click the Centre Justify button.
Right justify text
To align text to the right, click the Right Justify button.
Block justify text
To justify text to both the left and right click the Block Justify button.
Create a link
First select the text you wish to use as a link, then use the Create a Link button. A Link window will appear enabling you to type the link URL.
You can also use this button to edit an existing link. That is, either rename the link or change the target URL.
Removing a link
Just select a piece of linked text and use the Remove Link button to remove the link.
Inserting an anchor
An Anchor allows you to place bookmarks within a page which can then be linked to & from other areas of the page. This is helpful when pages have large amounts of content. Put the cursor where you’d like your anchor to be then click the Anchor Button. Appropriately name the anchor to the content it refers to.
You can then create a link using the Link Button and link the test to the Anchor you have created.
Insert Image
General Image Guidelines
There are some common-sense guidelines that should be applied to images:
- Optimum image size (width in pixels) is 300 pixels wide, however this may vary depending on your sites design/page templates. Use common sense when adding images, and try to be consistent across your site.
- Add images at the size you are going to use them on the site - e.g. don’t add a logo at 1200 pixels wide, then scale it down to 200 pixels wide when you add it to a page - you’re only making the image file size unnecessarily large. Reduce the image to 200 pixels BEFORE you upload it to the image library. See our tutorial on using the excellent image editing package urfanview.
- Give images file names that are meaningful - when selecting images to add to a page, initially the only indicator in the editor as to what the image is - is the filename.
- Image file size - smaller is better, try to keep photos under 25KB.
- When adding images to the image library, consider using folders to organize images - e.g. create a folder for logos, another for each of your product ranges or business units.
Image File Names:
- Must not contain any spaces or special characters e.g. !@#$%^&*()+?<>?:/\
- Must be named with either .gif or .jpg or .jpeg filename extension
To insert an image into your page:
Click the Insert/Edit Image button to bring up the Image Properties window.
Click the Browse Server button in the Image Properties window to locate an image. A window will appear displaying any available images to choose from.
After selecting the image you wish to add to your page you will be taken to the image properties window.
Alter the alignment, size, border and space around the image by modifying the relevant fields in the Image Properties window.
Click OK to return back to the Editor.
Selecting the image in the editor then clicking the Insert/Edit Image will allow you to edit the image properties.
Insert a table
You can add tables into the main body copy area of your page. The main reasons for using tables would be to anchor text in position relative to an image or images, or to display values in a tabular format.
There are some common-sense guidelines that should be applied to tables:
- Only use tables where absolutely necessary - would a bulleted list achieve as good a result?
- Take care when nesting tables within tables - it can complicate subsequent editing of the page.
- To edit an existing table, toggle table borders on first - so you can see any hidden borders.
Click the Insert/Edit Table button to launch the Table Properties window.
Enter or alter the number of Rows and Columns required. The width of the table as well as border and cell padding / spacing can be adjusted here as well.
Once the table is on a page it can be edited by Right-clicking over the table when then shows a pop up menu.
Insert a Horizontal Rule
Click the Insert Horizontal Line button to insert a horizontal line in your page.
Insert a Special Character
Use this button Button to insert Special characters that are not available on keyboards, for example