Aug

5

ColdFusion 8: All about the rich text editor

Filed Under ColdFusion | 65 Comments


Hotfix for Security issue with FCKeditor : Please refer to this post

As we all know, CFTEXTAREA now has a richtext attribute which brings in the “richness” into the text area with the underlying FCKEditor.

<cftextarea richtext=true name=”richtext01″>

The first interesting attribute that goes with richtext = true is toolbar.

This lets you specify the toolbar that has to be on the rich text editor. By default, there are two toolbars that can be used. One is the “Default” and the other is the “Basic”. If you want to use the “Basic” toolbar, just use this as the value of the toolbar attribute. Make sure that the value is an exact match in case with the toolbar name.

<cftextarea richtext=true name=”richtext01″ toolbar=”Basic”>

These toolbars are defined in the fckconfig.js file of the FCKEditor and is by default located in the \CFIDE\scripts\ajax\FCKeditor directory.

Define a custom toolbar

You can define custom toolbar by adding an entry in the fckconfig.js file.

Lets say the you want to create a toolbar configuration that just has the Bold, Italic in a line and then in the next line we want Undo, Redo and Find, Replace separated by a separator. We can define this configuration in the following manner:

FCKConfig.ToolbarSets["Mytoolbar"] = [
['Bold','Italic'], ‘/’ , ['Undo','Redo','-','Find','Replace'] ] ;

The ‘/’ character in the definition will move the icons following it to the next line of the toolbar. The ‘-’ character adds a separator in between the icons. Now use “Mytoolbar” as a value to the toolbar attribute.

<cftextarea richtext=true name=”richtext01″ toolbar=”Mytoolbar”>

Note:

1. Make sure the case matches exactly with “Mytoolbar”.

2. Also make sure to delete the browser cache before the new toolbar is used.

Next up, the stylesxml attribute lets you specify the path to the styles xml. It is from this xml file that the styles are picked up by the editor and displayed under the styles drop down of the editor. By default this xml will be picked up from /CFIDE/scripts/ajax/FCKEditor/fckstyles.xml. Styles can be modified/added by working on this file. Or a completly different styles xml file can be used by specifying its path.

Defining custom styles by adding an entry into fckstyles.xml

Say you need a style which makes the font both bold and underlined. A new entry can be included in fckstyles.xml to achieve this:

<Style name=”Custom Bold And Underline ” element=”span”>
<Attribute name=”style” value=”font-weight: bold; text-decoration: underline;” />
</Style>

This will add a new entry into the styles select box which the user can use to get both bold and underline.

Just as the stylesxml attribute, we also have the templatesxml attribute which lets you specify the path to the templates xml. The templates under the template drop down of the editor are picked up from this file. By default this xml will be picked up from /CFIDE/scripts/ajax/FCKEditor/fcktemplates.xml.

Defining custom templates by adding an entry into fcktemplates.xml

Say you need a template that just defines the title followed by the text. One such template can be defined in the following manner by adding an entry into fcktemplates.xml:

<Template title=”Title and Text ” image=”template1.gif”>
<Description>One Title followed by the text.</Description>
<Html>
<![CDATA[
<h3>Type the title here</h3>
Type the text here
]]>
</Html>
</Template>

This will add a new entry into the template drop down which the user can use.

The BASEPATH attribute

This attribute can be used to set configurations for each instance of the rich text editor rather than modify the global setting that could affect all instances of the rich text editor.

The basepath attribute can be used to set the path for the rich text editor from which the editor picks up all it’s JavaScript and configuration files. By default the value is “/CFIDE/scripts/ajax/FCKEditor”.

Copy the contents of the FCKEditor into a new directory path. Make all the changes to the files with the required configuration. Then use the new path as the value of the basepath attribute.

<cftextarea richtext=true name=”richtext01″ basepath=”/NewFolder”>

The styles xml, templates xml etc. will now be picked up from /NewFolder/ directory by default.

Other Attributes

toolbaronfocus : If this attribute is true then the toolbar shows up only when the text area is focused else the toolbar hides itself.

fontnames : A comma separated list of font names that will appear in the font names drop down of the rich text editor.

fontformats : A comma separated list of the different font formats.

fontsizes : A comma separated list of the different font sizes that will listed in the font size drop down of the rich text editor. Each value in the list must be of the format “Font Size in pixels/ display text” format.

skin : Specifies the skin to be used. By default the value is “Default”. A new skin can be created by creating a directory under the  \CFIDE\scripts\ajax\FCKeditor\editor\skins\ directory which would contain the styles/css and images for that skin.

height: To set the height of the rich text editor.

width: To set the width of the rich text editor.

Fetching the value from the rich text editor from JavaScript

The value from the rich text editor can be fetched by using the ColdFusion. getElementValue JavaScript API.

ColdFusion.getElementValue(richtextname, formname)

Comments

65 Responses to “ColdFusion 8: All about the rich text editor”

  1. Michael White on August 6th, 2007 6:46 am

    Can you believe with all the talk about PDF, exchange, speed, etc. with CF8 I FORGOT about the FCK Editor being added. Thanks for the reminder, I’ll try it out today!

  2. Jason McMinn on August 6th, 2007 7:48 am

    Live demo or screen shots??

  3. Rakshith on August 6th, 2007 11:41 pm

    I will include it in the above post soon.

  4. CSmith on August 9th, 2007 5:51 am

    I cannot fathom why they used FCKed instead of TnyMCE.

  5. Adam Fairbanks (Tidy Internet) on August 13th, 2007 10:44 am

    Thank you for the very concise summary of fckeditor commands. Very useful.

    One cool thing you can do with the xml files is make them dynamic by naming the xml files as cfm files:

    fckstyles.xml.cfm
    fcktemplates.xml.cfm

    This allows you or a user to add/edit a style or a template through a UI without having to edit the fckstyles.xml or fcktemplates.xml files directly. The styles and templates could be stored in the database, and the fckstyles.xml.cfm and fcktemplates.xml.cfm files could query the database and output the corresponding xml.

    You could also cache the queries (and refresh the cache when the styles or templates are updated), so the xml file doesn’t run the query every time.
    __

    Another option to allow an xml file to run CF code is to leave the extension as .xml and add an .xml servlet mapping to the CF web.xml file.

    Default file location on the server:

    C:\CFusionMX7\wwwroot\WEB-INF\web.xml

    CfmServlet
    *.xml

    The “16″ in macromedia_mapping_16 would be the next serial number after the last mapping (in this case, macromedia_mapping_15) in the web.xml file.

    Note, the url-pattern could be anything (e.g., *.rakshith), which would make fcktemplates.rakshith work.

  6. Adam Fairbanks (Tidy Internet) on August 13th, 2007 10:54 am

    Looks like the xml for the servlet mapping in my last comment didn’t come through. Trying again:

    <servlet-mapping id=”macromedia_mapping_16″>
    <servlet-name>CfmServlet</servlet-name>
    <url-pattern>*.xml</url-pattern>

  7. suranjit on September 11th, 2007 1:49 am

    title text is showing “blank”.i want to give “rxonline”

  8. Richard Davies on September 13th, 2007 2:06 pm

    There’s an error in your description of the “fontsizes” setting:

    fontsizes : A comma separated list of the different font sizes that will listed in the font size drop down of the rich text editor. Each value in the list must be of the format “Font Size in pixels/ display text” format.

    Actually, the font size value is not in pixels. It refers to the old size attribute of the font tag (i.e. 1-7).

  9. thng on September 26th, 2007 1:07 pm

    Hi,

    fckeditor does not work in Safari and Opera.

    How can I fix this problem?

    thanks!

  10. G on October 16th, 2007 10:26 am

    How do you set the value of the editor using Client Side Javascript?

  11. Rakshith on October 17th, 2007 5:52 am

    @CSmith – We decided to go with the FCKEditor some time last year. Lots of factors came in to decide the editor of choice, of which support from Frederico of the FCKEditor was one.

    @Richard – Thanks for the input. I will correct the post.

  12. Rakshith on October 17th, 2007 5:55 am

    The version of FCKEditor(latest at the time of ColdFusion release) shipped with ColdFusion does not support safari or opera.

    FCKEditor editor has version 2.5 beta now which has support for both safari and opera. We have plans to integrate with a stable version of 2.5 soon.

  13. Rakshith on October 17th, 2007 5:58 am

    @ G – Here’s how you can set the value of the editor using client side JavaScript.

    This is not a documented feature though.

    var editorinstance = ColdFusion.objectCache['nameoftextarea'];

    var editor = FCKeditorAPI.GetInstance(editorinstance.richtextid);

    editor.InsertHtml(”abc”);

  14. Steve Judd on October 17th, 2007 7:17 am

    Any insight on using the cftextarea richtext within a cflayoutarea. It loads fine and works when the page is initially loaded. However, I have the form submitting from the cflayout area, and then redisplay the form and I get an error “The textarea with name or ID set to cf_textarea123456789 was not found”

  15. Rakshith on October 17th, 2007 10:48 pm

    Suranjit, which title text are you talking about? Let me know.

  16. Rakshith on October 17th, 2007 11:35 pm

    @Steve – I tried the case you have mentioned. I dont seem to face any issue out there. Can you explain the exact case?

  17. Mike on October 22nd, 2007 1:08 am

    Im on a shared hosting platform and im guessing that i wont be able to define a custom toolbar without asking my host to add it to the master config file?

    can i add it locally somewhere?

    Thanks`

  18. Rakshith on October 22nd, 2007 1:29 am

    @Mike – Do have a look at the basepath attribute on the cftextarea tag. The basepath will let you specify the root directory from which the editor will pick up all the required JavaScript and configuration files.

    You can point the rich text editor to use a local directory as the active editor directory with this attribute.

  19. Mike on October 22nd, 2007 3:21 am

    thanks Rakshith, does this mean that i can simply add the config file into a custom dir and then refer to it in the basepath attribute – ie will it pick up the rest of the files from the default location or do i need to add them all in there?

    thanks again :)

  20. Rakshith on October 22nd, 2007 3:52 am

    @ Mike – Not just the config file, you will have add them all in there.

    Thanks Mike.

  21. noname on October 26th, 2007 10:13 am

    HELP! Rakshith, I can’t figure out why my basepath won’t work. Even when I rename the config file … located at \Inetpub\wwwroot\CFIDE\scripts\ajax\FCKeditor\fckconfig.js it STILL loads the textarea … I did a search for the “Real Config” and nothing, it’s the only one. How is it possible that it’s still working? I cleared my cache and restarted the service. :(

  22. noname on October 26th, 2007 10:30 am

    Sorry, figured it out. I had my CFIDE in IIS mapped to the wrong folder. It was my testbed, I was trying some things with network drives, and forgot to make the change. :/

  23. Joshua Cyr on November 27th, 2007 12:33 pm

    Hi Rakshith,

    Useful post so far! I want to modify the toolbar without uploading an entire new set of files. Theoretically I should be able to do something like:

    oFCKeditor.Config["ToolbarSets"]["Basic"] = [
    ['Bold','Italic','Underline'],
    ['OrderedList','UnorderedList'],
    ['TextColor','BGColor']
    ];

    Where oFCKeditor is the instance name. However I can’t figure out how the instances of the editor are named. Can you let us know what JS function to run to get the proper instance so that we can use the many js built in functions of FCK?

    Also, perhaps it is possible via JS to override the config path al la this FCK js option:
    http://wiki.fckeditor.net/Developer%27s_Guide/Configuration/Configurations_File

  24. Joshua Cyr on November 27th, 2007 12:49 pm

    strike that. I see in comment 13 you do answer how to get the instance. It is just not returning any properties.

  25. Alsa on November 29th, 2007 8:16 am

    Richtext works fine for me but it displays the paragraph mark on the web, like:
    This is the text entered by users as it appears on the website

  26. Alsa on November 29th, 2007 8:18 am

    The “” marks do not display on your site but it shows on my site when I used richtext.
    Alsa

  27. Rakshith on December 2nd, 2007 11:17 pm

    Joshua,
    Yes, you can get to the editor’s instance using comment 13. But I do not know how you could override the config properties defined in FCKConfig.js using the editor’s instance at this point of time. I will get back to you if I get to know how to achieve that. Thanks!

  28. Rakshith on December 2nd, 2007 11:19 pm

    Alsa,
    I did not understand the problem you are facing. Can you please explain more on that?

  29. Mike on December 3rd, 2007 4:56 am

    Hello again,

    Im wondering if/how the cftextarea deals with the old file upload system that is in fckeditor – is this available? if not is it something that will become avaiable?

    Are there any work arounds to allow image uploading in the text?

    Thanks again

    Mike

  30. ColdFusion 8: Enable File, Image and swf upload in the rich text editor in five steps : The Sprint on December 14th, 2007 7:12 am

    [...] This will give out the rich text editor as we know. More details about the usage of the tag can be found here. [...]

  31. Gavy on January 14th, 2008 10:38 pm

    just tried the editor and used the basepath attribute but when i try upload the pictures, it says you do not have permision to upload, anyone knows how to do it?

  32. Rakshith on January 15th, 2008 4:47 am

    Gavy,
    I have a post describing how you could enable uploads. Take a look at that.

    Thanks

  33. Matt on January 30th, 2008 10:13 am

    Have have something really bizarre happening. The editior doesnt always load first time onto my page. You sometimes have to refresh the page to get it to load. Any ideas why this would be happening?

  34. Rakshith on January 30th, 2008 9:47 pm

    Hmmm.. Thats weird. Matt, what else do you have in the page apart from the CFTEXTAREA tag?

  35. Marcus on January 31st, 2008 11:40 pm

    I have my ‘required’ attribute on. How do I change the text of the javascript alert message that pops up when the field is empty. The default message is “Error in commen text”.

  36. E Cohen on February 14th, 2008 1:16 pm

    I am wondering if you have any ideas about the onChange event not working when you turn on richtext with CFTextArea. It works fine when richtext is off, but fails when it is on. I am looking for a fix or workaround.

  37. Nikita on March 17th, 2008 2:57 am

    hi. i have used the FCKEditor . it works fine.. but now i m wondering how to add the

  38. Nikita on March 17th, 2008 3:00 am

    hi… i have used FCKEditor.. its work fine.. but now i m wondering about how to add “A” tag Style in to fckstyle.xml i have did with this code.. but it doen’t work. this code didn’t shww newlly added style into combobox for the user. plz help me ASAP…

  39. Shawn on March 31st, 2008 8:53 am

    just a slight addendum to Rakshith’s already very useful info in item 13:
    editor.InsertHtml(”abc”) will actually insert text before any existing text,
    editor.SetHTML(”abc”) will replace the entire content of the editor…please note the difference in case for InsertHtml and SetHTML

  40. Rakshith on March 31st, 2008 11:58 pm

    Nikita,
    Sorry for the delayed response. If the newly added style does not show up in the combo box, then it must one of issues where browser is caching the result. I suggest you clear the browser cache and then recheck.

  41. Seb on April 13th, 2008 9:53 am

    @Shawn: Actually, InsertHTML will insert the specified text at the current cursor position within the editor, rather than at the beginning…

  42. andrew on May 15th, 2008 3:42 pm

    UPDATE!
    coldfusion 8.0.1 includes FCKeditor 2.5, which works in Safari and there are better ways of getting and working with a cftextarea instance.

  43. Rakshith on May 20th, 2008 12:57 am

    Yup thats true. Not only is getting and working with the cftextarea instance better, but setting up file upload and spell check on it is much simpler and straight forward.

  44. Rob on May 27th, 2008 9:10 am

    Anyone had an issue where the FCKEditor stops working on a specific domain (website). We have multiple sites, and on all of them except one I’m having an issue where the editor does not render but rather HTML comments from the editor.

    Help!

  45. Rob on May 27th, 2008 9:12 am

    This is what comes out:

  46. Rob on May 27th, 2008 9:14 am

    * Copyright (C) 2003-2007 Frederico Caldeira Knabben
    *
    * == BEGIN LICENSE ==
    *
    * Licensed under the terms of any of the following licenses at your
    * choice:
    *
    * – GNU General Public License Version 2 or later (the “GPL”)

    … etc ….

  47. B Goetke on July 21st, 2008 1:38 pm

    I am having the same problem as E. Cohen (item 36 – dated Feb 14, 2008)…..

    I cannot get onClick, onChange, onKeyUp, onKeyDown to work with rich Text turned on!

    Please advise.. thanks…

  48. Swathi Kusum on September 2nd, 2008 12:46 am

    i have the same problem as Steve Judd mentioned in comment 14. Initially i can see the rich text area under the cflayoutarea, when loaded for the first time. when clicked on the collapse option and expand the cflayoutarea again, the textarea vanishes. Please give me a solution for this problem.

  49. Mark Banker on March 4th, 2009 8:33 am

    Can someone tell me how I can set the default font for input into the cftextarea that uses FCKEditor. Currently it is always Times New Roman. I want it to be Arial, Helvetica, sans-serif and not allow the user to change the font. I understand the use of FCKConfig.ToolbarSets to control what options they have to format their text. I have tried adding style=”font-family:Arial, Helvetica, sans-serif” to the tag without success. Anybody have a suggestion?

    Thank you.

  50. Jeromy on March 20th, 2009 11:40 am

    I’m having the same problem as E. Cohen (post 36) and B Goetke (post 47). It seems the javascript events don’t fire when ‘richtext=”yes”‘–not even a simple ‘onClick=”alert(’hi’);”‘.

  51. John Develekos on April 15th, 2009 6:59 am

    I have a problem with the editor handling greek characters. When I enter a greek word it transforms the characters to their symbolic html equivalents (Είναι). Is there a way to solve that? Thank you in advance…

  52. Roberto F. on June 16th, 2009 5:13 pm

    Hi, I’m having some problems, my server say that I have no permission for create a folder when I click browse server. Well, in the last version I had no problem with that, but I had problems with JS library… so I turn back. Well, doo ya know how can I start findout the error?

  53. Rakshith on June 29th, 2009 1:01 am

    @ Roberto: FCKEditor uploads the file in a user specified directory which can be configured in /CFIDE/scripts/ajax/FCKEditor/editor/filemanager/connectors/cfm/config.cfm. By default it creates a /userfiles/ directory under the webroot. Looks like the creation of this directory which will be used to save the uploaded files is not getting created as you do not have the right permissions to create the directory on the server.

  54. Rakshith on June 29th, 2009 1:15 am

    @ John: Not sure about this one.

  55. Rakshith on June 29th, 2009 1:17 am

    @ Cohen, Goetke, Jeromy: I agree that this is an issue. Something that has to be fixed. We have a bug for this one.

  56. Rakshith on June 29th, 2009 2:00 am

    @ Swathi: Can you give me more details about the issue? Is the rich text editor inside a border layout? Can you share your code?

  57. Rakshith on July 11th, 2009 6:14 am

    @Mark : I haven’t tried setting a default font. But I quickly looked at FCKeditor/fckconfig.js file. I saw that there are settings for:

    FCKConfig.DefaultStyleLabel = ” ;
    FCKConfig.DefaultFontFormatLabel = ” ;
    FCKConfig.DefaultFontLabel = ” ;
    FCKConfig.DefaultFontSizeLabel = ” ;

    Try it out. I would say experiment with the different settings that are available in fckconfig.js file.

  58. Ethan on July 18th, 2009 1:25 pm

    Hey, thanks! The post and the comments were all of great help.

  59. Aaron Neff on August 22nd, 2009 2:50 am

    @Steve Judd (comment on October 17th, 2007): This appears to be related to the length of the HTML string returned from the source attribute of cflayoutarea. I was able to consistently cause this error, by including a 50k-100k length HTML comment into the file being referenced by the cflayoutarea source attribute.

  60. Eduardo Sanchez on August 25th, 2009 6:23 am

    There is a vulnerability for ColdFusion’s fckeditor. Make sure you patch it by going to Adobe’s site. http://www.adobe.com/support/security/bulletins/apsb09-09.html

  61. Chris on December 7th, 2009 2:52 pm

    I stumbled upon this post while doing some research and thought you might be able to help.

    Is there a way to load a template when the page/form initially loads without the user having to go through the process of clicking the templates button and then selecting the template?

    The CF docs don’t have any mention of it (that I could find) but it seems like it would be a useful feature.

  62. Rakshith on December 7th, 2009 11:43 pm

    @Chris: I am not sure I got your question right. Can you explain a bit more?

  63. Chris on December 10th, 2009 1:55 pm

    You can create custom templates that the end user can open and use by clicking the Templates button in the toolbar and selecting from the list.

    Rather than having the user have to click the Templates button, I would rather have a custom template load automatically when the cftextarea first loads.

  64. Nicole on January 2nd, 2010 4:18 pm

    I’m using cftextarea with richtext = “yes” and html = “yes”; when I click the form’s reset button (whether using the input or cfinput tag), the cftextarea fields are not reset (i.e. cleared). Do anyone know how I can resolve this?

  65. Rakshith on January 4th, 2010 2:11 am

    @Nicole: You could set the value of the rich text editor using the ColdFusion.RichText.setValue(editorName, value). Setting it to empty would clear the field.

Leave a Reply