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:
IE 5.5+
Firefox 1.5+
Safari 3.0+
Opera 9.5+
Netscape 7.1+
Camino 1.0+
The integration of FCKeditor in CFWebstore has some important differences from the default FCKeditor:
The image and file upload functions do not use the connectors included with FCKeditor, but use the image/file manager created for CFWebstore
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.
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.
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):
ENTER will create a new paragraph
SHIFT-ENTER will create a line break
SHIFT-SPACE will insert a non-breaking space
BACKSPACE will delete the previous character
CTRL-BACKSPACE will delete the previous word
CTRL-A will select all text
CTRL-B will bold text
CTRL-C will copy text to the clipboard
CTRL-I will italic text
CTRL-L will open the link dialog box
CTRL-U will underline text
CTRL-V or SHIFT-INSERT will insert text from the clipboard
CTRL-X or SHIFT-DELETE cuts the highlighted text
CTRL-Y will redo the last action
CTRL-Z will undo the last action.
CTRL-ALT-ENTER will toggle the full screen view
CTRL-TAB shows the source view
Some additional tips:
It’s generally best to avoid much use of fonts, use styles instead which will typically display better across multiple systems.
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.
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.
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).
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’).
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.
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.
For advanced users, you can click on Source to view and edit the actual HTML source code being created by the editor.