Getting the new CF8 Rich TextArea working right, from the start
Note: This blog post is from 2008. Some content may be outdated--though not necessarily. Same with links and subsequent comments from myself or others. Corrections are welcome, in the comments. And I may revise the content as necessary.If you try the new CF8 html rich textarea (cftextarea richtext="yes"), you may be surprised by a couple of things. They may even discourage you using the feature, which is too bad. Here are some simple solutions. Note that I'm NOT referring here to the older Flash-based textarea that was added in CF7. The new rich text textarea is pretty nifty, if you can get by these couple of likely hitches.
First, you'll want to set the "toolbar" value
First, if you don't specify a "toolbar" attribute, you'll get a pretty ugly looking default toolbar with 3 rows of LOTS of icons. Now, if you read the docs, it will point out that you can get a simpler subset with setting the toolbar to a basic setting. But then, if you're not careful, it will complain:
toolbar set "basic" does not exist
A search of google (or the CF docs) won't turn up much.
Second, it's "Basic", not "basic"
So what's the solution? Well, it turns out that it's simply that the attribute is case-sensitive. Doh! So a working example is:
<cftextarea richtext="yes" toolbar="Basic" name="somefield"></cftextarea>
<input type="Submit">
</cfform>
<cfdump var="#form#">
Note that, of course, you do need to do it within a CFFORM tag. I've added a CFDUMP to show the results when you do submit it.
That offers a nice single-row set of icons. (The alternative value, to get the default list, is "Default" (not "default"), but if you leave the toolbar attribute off, you'll get it anyway. The docs (see below) talk about how you can modify what icons you see by creating your own custom toolbar. It's just that the docs don't clarify well this issue about the basic value being case-sensitive. (I've added comments to the livedocs which have been accepted.)
Don't use Rows/Cols, use Width/Height
Here's another bummer that's not well documented: when using CFTEXTAREA, the traditional ROWS and COLS attributes (of a normal Textarea tag) have no affect at all, whether you're using an HTML or Flash-based CFTEXTAREA.
The solution: you must specify Height and Width (in pixels). (You won't get an error if you use rows and cols, they just won't have any effect.)
Some other issues
If you haven't noticed, when you submit such a rich text textarea, what you get in the form submission is the entered text with HTML tags representing whatever formatting the user applied using the toolbar, or keyboard shortcuts, like Ctrl-B for bold. (I'm really not interested in debating here whether the HTML it creates meets everyone's preferences. Please take that up on the livedocs comments area.)
Finally, I'll point out that the docs (the Developers Guide page, at least) shows using the attribute as richtext=true. FWIW, this can also be specified as "true" (quoted) and "yes". I just mention this in case anyone may go doing google or adobe site searches to find more on the use of the feature. You might not find all there is if you're too specific about these "richtext" attribute values.
Where to find help for still other issues
If you need more help on or introduction to the rich text textarea, I'd point you to blog entries by other folks:
- ColdFusion 8: All about the rich text editor
- ColdFusion 8: Enable File, Image and Flash upload in the rich text editor in five steps
And of course see the docs:
Finally, I'd like to clarify that I really don't mean for this blog entry to become a place where all manner of problems related to using the rich textarea are discussed. I'd ask that please you keep any questions or observations related to just really fundamental aspects of using it, and take up other concerns at the Adobe CF Forums, especially the CFORM forum.
For more content like this from Charlie Arehart:Need more help with problems?
- Signup to get his blog posts by email:
- Follow his blog RSS feed
- View the rest of his blog posts
- View his blog posts on the Adobe CF portal
- If you may prefer direct help, rather than digging around here/elsewhere or via comments, he can help via his online consulting services
- See that page for more on how he can help a) over the web, safely and securely, b) usually very quickly, c) teaching you along the way, and d) with satisfaction guaranteed
and for BlogCFC users
http://www.swphoto.n...
Here's the PDF:
http://www.adobe.com...
here are the instructions (hopefully I remembered to dump in all the URLs since I'm not sure if you can link here):
--------------------------
Uploading
--------------------------
The following icons have been added to the default tool bar: Image Button, Link, Unlink, Image, Flash. For the complete list of items in the default tool bar see the FCKConfig.ToolbarSets["Default"] entry in cf_webroot/CFIDE/scripts/ajax/FCKeditor/fckconfig.js.
You can now enable any or all of the File Upload and Browse Server options on the image, flash, link and unlink toolbar items in the rich text editor (they do not appear by default). To do so, set the following properties in the /CFIDE/scripts/ajax/FCKeditor/fckconfig.js file:
FCKConfig.LinkBrowser = true;
FCKConfig.ImageBrowser = true;
FCKConfig.FlashBrowser = true;
FCKConfig.LinkUpload = true;
FCKConfig.ImageUpload = true;
FCKConfig.FlashUpload = true;
These properties are false by default. You can selectively turn them on based on the desired types of browsing or upload
--------------------------
Spell Check
--------------------------
ColdFusion does not provide a spelling checker in the rich text editor; however, this update enables you to add a spelling checker as described below. The spelling checker has not been fully tested, and is not supported, but we believe that should work on Firefox 2 on Windows systems only. Due to problems in the underlying FCKEditor code, the checker works in Internet Explorer, but it currently generates an error when you close the spelling checker dialog.
Use the following procedure to enable the spell checker in Windows:
1. Download and install Aspell from The GNU Aspell site http://www.aspell.ne... . The windows version can be found at ftp://ftp.gnu.org/gn... It is easiest to install the program in the default location C:\Program Files\Aspell\. If you install it in a different location, you must specify the location in /CFIDE/scripts/ajax/FCKeditor/editor/dialog/fck_spellerpages/spellerpages/server-scripts/spellchecker.cfm.
2. Install the dictionary for the required language from the GNU Aspell Win32 version page http://aspell.net/wi... . The English dictionary is aspell-en-0.50-2-3.exe http://ftp.gnu.org/g... . Note: If you don't install dictionary, Aspell will not find misspelled word.
3. If you install a dictionary for a language other than English, specify the language in /CFIDE/scripts/ajax/FCKeditor/editor/dialog/fck_spellerpages/spellerpages/server-scripts/spellchecker.cfm.
4.Set the following property to true in /CFIDE/scripts/ajax/FCKeditor/fckconfig.js:
FCKConfig.FirefoxSpellChecker = true;
Note: in some cases, this option might not be required,
5.To check the spelling of any language other than English, in /CFIDE/scripts/ajax/FCKeditor/editor/dialog/fck_spellerpages/spellerpages/server-scripts/spellchecker.cfm find the following line, and replace en_US with the correct language designator, such as fr for French.
<cfset lang = "en_US">
You do not need to specify the local designator, even though the english checker does, because there is only one Aspell dictionary per language.
6.
The toolbar configurations provided with ColdFusion do not include the spell checker icon. To add the icon, put the following entry in the FCKConfig.ToolbarSets entry for your toolbar:
,'SpellCheck'
The first three lines of your toolbar set could look as follows, for example:
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','','Print',
'SpellCheck'],
Guys, I appreciate that you want to help people learn about the upload function, but I said very explicitly in my entry (in bold), "I really don't mean for this blog entry to become a place where all manner of problems related to using the rich textarea are discussed."
I didn't comment when Steve wrote, because I didn't want to seem grouchy and unappreciative. I realize he was just trying to help other users of the tag with an issue he thought important (and perhaps fundamental). And JC, please don't hear me gumbling that you shared the info you did. The link about the release notes may well help those that Steve was talking to.
But let's leave it at that. I'd like to ask that we have no more discussions of the upload feature. :-) Take them up further on Steve's blog entries instead, which are focused on that subject. I'd like this to remain focused on the things I mentioned in this entry. :-)
Is it possible to use the built-in cfform validation with the rich textarea? Specifically I would really like to be able to specify a maxlength. I have searched the documentation and the web high and low and have not been able to figure out a way to set a maxlength.
Ray
How do you edit the toolbar sets then I wonder? Any ideas?
Thanks,
Chris
Turns out, for firefox to be able to display the fckeditor custom toolbar, you have to place the toolbar tag right after richtext=""yes" . For example. <cftextarea ...richtext=true toolbar="custom toolbar name" . The order matters in Firefox.
One may wonder, "well how would one know about using that function for this tag?", and truthfully part of the problem is that the CFML reference (or cfquickdocs.com, which is based on it) has no info on this in the CFTEXTAREA tag page itself. Instead, it's in a section of the reference called “AJAX JavaScript Functions" (which btw, the quickdocs site doesn't offer as it focuses only on the pages for tags and functions).
The CF8 docs are offered at http://livedocs.adob... For CF9, there's no one page listing all the CF docs, but a link to the CF9 ref is http://help.adobe.co... Links to the other books appear on the left.
I mention the other books because there is another book in the CF docs to note. Many miss it, but there is a Developer's Guide, which is more of a "user guide" discussion of CF features. Like the reference, it's over 1,000 pages. For CF8. see chapter 34 on "Using Ajax UI Components and Features" which mentions these Javascript functions in the context of tags like CFTEXTAREA richtext and it points to the CFML reference for that Functions chapter for more detail.
Hope that's helpful.