
cftextarea richtext - change toolbar on the fly with js
ColdFusion 8 has a handy new tag to instantly create a rich text editor in your forms. It uses FCK editor.
Anyone who has spent a few minutes with it has noticed that the two toolbar configs that it comes may not fit your needs. In fact the Basic toolbar has a Link option in it. This link option creates a popup window that presents a button to browse the server and on another tab a form to upload documents. Don't panic, the functionality to actually browse or upload has been rmoved (file not found error). Why did they leave in the buttons and form? Who knows. This is not acceptable to present to any end user or client, however.
So, the logical thing to do is:
- Replace the file in the cfide/ path with the original file so it works. You don't want to do this for editors exposed to the general public of course, as you don't want them uploading documents and browsing your server.
- Remove the offending code from the cfide source.
- Specify new toolbar configs in the fckconfig.js file.
All three options assume that you have access to the server. No big deal if you have your own server, not an option if you are on a shared host or if you write software that will be installed on lots of different servers.
4. A fourth option and really the only other option given thus far for those without access to the cfide code is to specify your own fckeditor path in the cftextarea and then upload the entire fckfolder. This means for each install you may have to have a whole copy of all the fckeditor code. This is kind of lame for many reasons.
I have worked for a bit to come up with a fifth option. It wont fix the file browse issue, Adobe will likely address that shortly. It will give us more flexibility in how to implement the toolbar options.
5. Change the toolbar setup on runtime with javascript.
This code:
- Creates a function called 'FCKeditor_OnComplete()' that FCKeditor runs when the editor is completely rendered. FCK checks if this function exists, and runs if so.
- Then we specify our new toolbar congig.
- Then we load that new toolbar config.
function FCKeditor_OnComplete(editorInstance)
{
editorInstance.Config["ToolbarSets"]["BasicMin"] = [
['Bold','Italic','Underline'],
['OrderedList','UnorderedList'],
['TextColor','BGColor']
];
editorInstance.EditorWindow.parent.FCK.ToolbarSet.Load('BasicMin' ) ;
}
This way we don't need to modify any original source files, don't need to upload any other files, etc.
The one drawback to this is there will be a moment when the default toolbar or basic toolbar is shown before the new toolbarset is applied. That short flicker is something I can't seem to get around. But hey, its better than options 1-4 for many of us.
On a side note, I thought that the .config toption would do this without my having to use .load. But no, it simply does nothing unless I follow it up with .load. I haven't found a cleaner way, though one may certainly exist. If anyone has any other options, be sure to comment and share with the rest!

NAVIGATION
HomeAbout Me
RSS
Search
Subscribe
Recent Entries
Flash Camp BostonNew Blog Design
Pre-Conference Training at cf.Objective()
FireFox 3.6 KTML Editor Fix
I am now a part of the Adobe Community Professionals Group
Recent Comments
FireFox 3.6 KTML Editor Fix
Fred said: Found another bug in Firefox 3.6
When inserting a table you can't select the number of columns.
So I...
[More]
Repeating Events Question
ueghbxedu said: UaejcB <a href="http://ysyhrmkbkhco.com/&...;, [url=http://pwncz...
[More]
Repeating Events Question
fadxkfyuadn said: n6qVCL <a href="http://bdiorhdtbwzb.com/&...;, [url=http://uvnao...
[More]
FireFox 3.6 KTML Editor Fix
Joshua said: While changing that far will load the editor, does it show the drop down class menu correctly now?
[More]
FireFox 3.6 KTML Editor Fix
Al Johnson said: HI,
I am still fighting to keep my code going as there is nothing better than KTML nad I have writt...
[More]
Calendar
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
Archives By Subject
blogs (31) [RSS]books (4) [RSS]
Crazy (39) [RSS]
DIY (8) [RSS]
Flex (3) [RSS]
games (10) [RSS]
GRRR (13) [RSS]
Ideas (11) [RSS]
Local (14) [RSS]
LOLpics (2) [RSS]
money (9) [RSS]
music (3) [RSS]
Personal (27) [RSS]
Photos (8) [RSS]
Politics (8) [RSS]
Projects (22) [RSS]
Review (18) [RSS]
RPM (9) [RSS]
Spam (16) [RSS]
Technology (66) [RSS]
Testing (3) [RSS]
TV (15) [RSS]
video (32) [RSS]
Web Dev (218) [RSS]
World of Warcraft (16) [RSS]

As for the other issue, I would assume they will have that fixed in an updater.
function FCKeditor_OnComplete(editorInstance)
{
editorInstance.Config.LinkBrowser = false ;
editorInstance.Config.LinkUpload = false ;
}
thanks for the 5th option, that was really what I was looking for. This should be something Adobe has to build in the CFMX 8.1 update. It not realistic to think that everyone has access to the server.
So thanks for your effort.
i.e. This works....
<cfform name="myform">
<cfinput name="registrationAddress" type="text" size="40">
<cftextarea
bind="Hello ...{registrationAddress@keyup}"
richtext="yes"
width="500"
height="400"
name="registrationEmail"
wrap="soft" />
</cfform>
This does not
<script>
<!--//
function FCKeditor_OnComplete(editorInstance)
{
editorInstance.Config["ToolbarSets"]["myToolbar"] = [
['Source','DocProps','-','Preview'],
['Bold','Italic','Underline'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight'],
'/',
['Link','Unlink'],
['Table'],
['Style','FontSize'],
['FitWindow','-','About'] // No comma for the last row.
];
editorInstance.EditorWindow.parent.FCK.ToolbarSet.Load('myToolbar' ) ;
}
//-->
</script>
<cfform name="myform">
<cfinput name="registrationAddress" type="text" size="40">
<cftextarea
bind="Hello ...{registrationAddress@keyup}"
richtext="yes"
width="500"
height="400"
name="registrationEmail"
wrap="soft" />
</cfform>
Any thoughts?
The does not work....
<script>
<!--//
function FCKeditor_OnComplete(editorInstance)
{
editorInstance.Config["ToolbarSets"]["myToolbar"] = [
['Source','DocProps','-','Preview'],
['Bold','Italic','Underline'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight'],
'/',
['Link','Unlink'],
['Table'],
['Style','FontSize'],
['FitWindow','-','About'] // No comma for the last row.
];
editorInstance.EditorWindow.parent.FCK.ToolbarSet.Load('myToolbar' ) ;
}
//-->
</script>
<cfform name="myform">
<cfinput name="registrationAddress" type="text" size="40">
<cftextarea
bind="Hello ...{registrationAddress@keyup}"
richtext="yes"
width="500"
height="400"
name="registrationEmail"
wrap="soft" />
</cfform>
But this does...
<cfform name="myform">
<cfinput name="registrationAddress" type="text" size="40">
<cftextarea
bind="Hello ...{registrationAddress@keyup}"
richtext="yes"
width="500"
height="400"
name="registrationEmail"
wrap="soft" />
</cfform>