CFTextArea richtext editor

I am toying with a new application that lets folks collaborate on a document online. Kind of like Basecamp’s write board but perhaps not as dynamic. I needed to build a form with a rich text editor to let the users have some tools to mark up the document. Fortunately Coldfusion offers CFTextArea with the optional richtext.

<cftextarea name="mytxt" richtext="y" toolbar="Basic" height="300" width="500">
The toolbar attribute allows for a choice of basic (bold, Italic, link, ol, ul) or default which has everything except the kitchen sink. What I wanted was something in between. Fortunately I found a couple articles about modifying the available toolbars. But none seemed to work. Then I found a script* which does the same thing except you put it after your form in a cfm. The script overwrites the chosen editor and replaces it with your custom one. I customized the form elements I wanted by looking at the fckeditor fckconfig.js file.

<script>
function FCKeditor_OnComplete(editorInstance)
{
editorInstance.Config["ToolbarSets"]["BasicPlus"] = [
['SpecialChar','Bold','Italic','Underline','StrikeThrough','Link', 'Unlink','-','Cut','Copy','Paste', 'Find','Replace',
'-','FontFormat','FontSize','TextColor']
];
editorInstance.EditorWindow.parent.FCK.ToolbarSet.Load('BasicPlus') ;
}
</script>

which gives this editor toolbar (click image to see larger).
custom fckeditor Richtext Toolbar

* Script modified from this article

Cup size   
Select size then click on coffee cup.
This entry was posted in Code. Bookmark the permalink.