Extending richtext.cfc in FarCry 4

I've been a really hopeless blogger lately so I thought I'd kick things back into gear with some FarCry 4 goodness. FarCry 4 now uses TinyMCE for it's rich text editor and any customisations or editor replacements are done by extending richtext.cfc. This quick example just shows you how to change the configuration options of TinyMCE.

I wanted to specifically make changes to the HTML formatting output, HTML editor window, and default table attributes, but there is a whole lot more you can do with TinyMCE too - check out the TinyMCE Wiki for a full reference of configuration, button and plugin options.

In your project you will need to create a formtools folder inside /farcry/yourproject/packages, and create a file called richtext.cfc. This new component will extend farcry.core.packages.formtools.richtext and will override the getConfig() function - pretty straight forward really :)

Below is my sample richtext.cfc (use at your own peril, comments are welcome!)

<cfcomponent extends="farcry.core.packages.formtools.richtext" name="richtext" displayname="Rich Text Editor" hint="Used to liase with longchar type fields"> <cffunction name="getConfig" access="public" output="false" returntype="string" hint="This will return the configuration that will be used by the richtext field"> <cfset var configJS = "" /> <cfsavecontent variable="configJS"> <cfoutput> theme : "advanced", plugins : "table,advhr,farcrycontenttemplates,advimage,advlink,preview,zoom,searchreplace,print,contextmenu,paste,directionality,fullscreen,spellchecker", theme_advanced_buttons1_add : "pasteword,pastetext,separator,search,replace,spellchecker,separator,fullscreen", theme_advanced_buttons2_add : "separator,farcrycontenttemplates", theme_advanced_buttons3_add_before : "tablecontrols,separator", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_path_location : "bottom", theme_advanced_resize_horizontal : true, theme_advanced_resizing : true, extended_valid_elements: "code,colgroup,col,thead,tfoot,tbody,abbr,blockquote,cite,button,textarea[name|class|cols|rows],script[type],img[style|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]", remove_linebreaks : false, relative_urls : false, <!--- customisations ---> content_css : "/css/tinymce-content.css", apply_source_formatting : true, fix_table_elements : true, remove_trailing_nbsp : true, theme_advanced_source_editor_width : "900", theme_advanced_source_editor_height : "700", <!--- customisations: table plugin ---> table_default_border: 0, table_default_cellpadding: 0, table_default_cellspacing: 1, verify_html : false </cfoutput> </cfsavecontent> <cfreturn configJS /> </cffunction> </cfcomponent>

After your new file is in place and has been saved you'll need to do an ?updateapp=1 for the new configuration to take effect. That should be all there is to it!