FckEditor

This page will explain in depth about FCKEditor and the features it offers for formating text fields.


What is the FCKEditor?

The FCKEditor is a powerful tool that allows you to quickly and easily edit and format text fields much like using a word processor. With the FCKEditor you can use a wide variety of features for viewing the text field, editing the text with in it, adding smilies, spell checking and many other features. FCKEditor allows you to edit almost every feature of text in the textfield.

How do you use the FCKEditor?

It is very simple to use the FCKEditor, you simply have to click on the icon for what you want to do. Also, if you are unsure of something if you mouse over the icon, its name will show up and you can always reference this page for what each icon can do. Below is an image of what the FCKEditor looks like and an associated text field. The FCKEditor is available automatically in many modules through out phpWebSite.

http://phpwebsite.appstate.edu/images/wiki/FCKEditor1.png

Now we can go through what each icon does on the FCKEditor, we'll start with the top row, going from left to right.

  • 'Maximize/Minimize Editor size - Clicking on this icon will make the text field the size of the entire browser window. When you are finished or want to change back to the smaller size, click on the icon again.
  • New page - This icon will clear the text field you have been working on, if you want to start over, simply click this.
  • Preview - Clicking on this icon will cause a new browser window to open that will show you a preview of what your text field will look like to users with all of the formating.
  • Cut - This will allow you to cut out a selection of text to paste some where else. To cut a selection of text you must first highlight it. (Unlike copy, it moves the original instead of copying it.)
  • Copy - Make a copy of a selection of text you have highlighted so that you can paste it else where. (Unlike cut, the source will still be there even after being pasted.)
  • Paste - This will allow you to paste something you copied or cut previously.
  • Paste as plain text - This will paste whatever you copied/cut as plain text.
  • Paste from Word - This will allow you to copy text from Word and the copied text will retain its formating.
  • Undo - This button will allow you to undo your recent actions, one at a time in case you accidentally make a mistake.
  • Redo - Allows you to immediately redo anything you removed/changed with Undo.
  • Find - This button will pop up a window that you can enter a word/phrase and it will then search your document for a match (or matches). This is helpful if you have a very long text field and are trying to find a particular area to edit.
  • Replace This works much like Find; the main difference being that you select a word/phrase to find and add a word/phrase for the editor to replace it with. For example if you realized you had named the wrong person several times in the text field, instead of going through and finding each one and then replacing it with the correct name you can use Replace, type the incorrect name for it to find and have it replace it with the correct name in each place. Also, you have the option to replace one at a time or to replace all.
  • Select All - This button will allow you to select the entire text field. This is helpful if you want to copy/cut the entire text field and move it all some where else.
  • Remove format - This command will automatically remove any special formatting that has been added to the text field so far.

http://phpwebsite.appstate.edu/images/wiki/FCKEditor2.png

Next we will go through all the buttons on the middle row, looking from left to right.

  • Bold - This will allow you to make the text Bold, click it a second time to turn off Bold.
  • Italics - This will allow you to type in Italics, click it a second time to turn off Italics.
  • Underline - This will make your text Underlined , click it a second time to turn off Underline.
  • Strike Through - This will Strike Through , any text you type. Click the button a second time to turn off Strike Through.
  • Subscript - This allows you to add subscript to your text.
  • Superscript - This allows you to add superscript to your text.
  • Insert/Remove Numbered List - This button will add or remove a numbered list to your text field depending on where your cursor is. (If you are at a numbered list and click this, it will remove it, if you are at an area with no numbered list it will add one.)
  • Insert/Remove Bullet List - Just like the Numbered List button, except it will add/remove a bullet list instead of numbered.
  • Decrease Indent - This will allow you to decrease the indent of the text. (Note: You need to have previously indented the text with the Increase Indent button to be able to decrease indent.)
  • Increase Indent - This will indent the text your cursor is on and any text after it until you select decrease indent.
  • Left Justify - This will make the selected text or entire text field Left Justified.
  • Center Justify - This will make the selected text or entire text field Center Justified.
  • Right Justify - This will make the selected text or entire text field Right Justified.
  • Block Justify - This will make the selected text or entire text field Block Justified.

http://phpwebsite.appstate.edu/images/wiki/FCKEditor3.png

Now we will look at the final (bottom) row of buttons on the editor, going from left to right.

  • Insert/Edit Image - This will allow you to add an image to your text field. (Note: There are quite a few options and ways to add your image, it will be explained more below.)
  • Insert/Edit Flash - This will allow you to add a Flash image to your text field.
  • Insert/Edit Table - The table button will allow you to add a table to your text field. You will be able to choose how many rows/columns it will create and what goes in each.
  • Insert/Edit Link - This button will allow you to add a link to your text field. If you would like the URL to be linked by clicking on a word or phrase, highlight the word/phrase and then click on Insert/Edit Link.
  • Remove Link - Select a URL (by putting the cursor over it or highlighting it) and then click Remove Link to make it normal text.
  • Anchor - The anchor feature will 'anchor' an item in place in the text field right where it is.
  • Check Spelling - Clicking on this button will bring up a window that will check your spelling and give you suggestions to fix misspelled words.
  • Insert Horizontal Line - This will insert a horizontal line through your text field.
  • Insert Smiley - Selecting this button will bring up a window with several different smilies you can choose from to add to your text field.
  • Insert Special Character - This will allow you to easily add special characters that are not normally on keyboards.
  • Source - Clicking on the Source button will allow you to see all the associated code required to format your text properly. This is advised only for more advanced users. To go back to normal usage, click Source again.
  • Style - This drop down box will let you quickly and easily change the formatting of the text you are typing, including easily adding headings and switching back to normal text.

http://phpwebsite.appstate.edu/images/wiki/FCKEditor4.png

Using the FCKEditor you can fill in text fields to make much more interesting web pages and various other forms. Links on how to use several modules that incorporate the FCKEditor are included below. (Note: If you are more comfortable with Word for formatting text, you can always write up your entry and format it in Word and then copy it with the Paste from Word button.)

Below are links to several modules in phpWebSite that use the FCKEditor.


Return to the PageSmith Guide.
Return to the Block Guide.
Return to the Calendar Guide.
Return to the Photo Album Guide.

Return to the User Documentation main page.


Last modified 05/06/2008 10:15:55 AM by Matt McNaney

Immutable Page | Discussion | Print View | History |