×

Login

forgot your login?

Using FCKeditor

CFWebstore® uses the popular WYSIWYG editor FCKeditor for the various content sections in the administrator. The editor is developed by a team led by Frederico Caldeira Knabben (hence the product name) and is regularly updated with new features and support. You can view information on this editor at the FCKeditor homepage and view a complete User’s Guide as well. 
 
The current release of FCKeditor is supported on the following browsers:
 
  1. IE 5.5+
  2. Firefox 1.5+
  3. Safari 3.0+
  4. Opera 9.5+
  5. Netscape 7.1+
  6. Camino 1.0+
 
The integration of FCKeditor in CFWebstore has some important differences from the default FCKeditor:
 
  1. The image and file upload functions do not use the connectors included with FCKeditor, but use the image/file manager created for CFWebstore
  2. Some buttons/functions are disabled in the editor, as they do not apply to CFWebstore. These include things like Save Page and New Page and all the form buttons. If for any reason you need these, you can always re-enable them in the fckconfig.js file.
  3. Some additional buttons on the Basic toolset which is used for teaser text input boxes. You can add additional buttons to this toolbar in the fckconfig.js file if you need more than are provided.
  4. The styles available in the editor correspond to the styles in the css/default.css file and are defined in css/fckstyles.xml. To use a different style sheet you would change the EditorAreaCSS setting in the fckconfig.js file and add/edit any of the definitions in the xml file.
 
Here are some basic keystrokes that may help you in entering text in FCKeditor (these make work or not according to your other browser/OS settings):
 
  1. ENTER will create a new paragraph
  2. SHIFT-ENTER will create a line break
  3. SHIFT-SPACE will insert a non-breaking space
  4. BACKSPACE will delete the previous character
  5. CTRL-BACKSPACE will delete the previous word
  6. CTRL-A will select all text
  7. CTRL-B will bold text
  8. CTRL-C will copy text to the clipboard
  9. CTRL-I will italic text
  10. CTRL-L will open the link dialog box
  11. CTRL-U will underline text
  12. CTRL-V or SHIFT-INSERT will insert text from the clipboard
  13. CTRL-X or SHIFT-DELETE cuts the highlighted text
  14. CTRL-Y will redo the last action
  15. CTRL-Z will undo the last action.
  16. CTRL-ALT-ENTER will toggle the full screen view
  17. CTRL-TAB shows the source view
 
 
Some additional tips:
 
  1. It’s generally best to avoid much use of fonts, use styles instead which will typically display better across multiple systems.
  2. Many functions in the editor have additional settings available by right-clicking on the item you inserted. For instance, after inserting a list, you can right-click and bring up a dialog to change the type of list bullets to use.
  3. Keep an eye out for additional pages of options when adding items like links and images. Some of these options may not make sense if you are not a web developer, but you’ll find some settings that allow you to do some advanced functions, like creating a link that opens in a new popup browser window. See the FCKeditor User’s Guide for full details.
  4. When CFWebstore inserts an image into your content, it will use the full URL path to the image, using the store URL as defined in your config.cfm file. This is necessary so the image is visible in the editor. Be aware however, that if you change your store URL, you will need to update any links created with the editor (or do a search-and-replace on them in your database).
  5. To enter a link to another page in your store, select the text you wish to add the link to and click the Link button. Leave the link type set to URL and in the box for protocol select “”. Then enter the link in the URL box (it should typically start with ‘index.cfm’).
  6. The version of the editor included with version 6.31+ of CFWebstore now encodes email links so they are less visible to spam bots. If you are using these in any of your text and have updated from an older version, you may want to update the links by right-clicking on the link and selecting Edit Link.
  7. The new version also includes an option to open a link when you right-click on it. Be sure your browser is configured to allow pop-ups for your site for this to work.
  8. For advanced users, you can click on Source to view and edit the actual HTML source code being created by the editor.