Freelance Web Development

As promised, I am releasing the CF function I use to display tinyMCE instances. It can handle multiple languages, multiple instances per page, and of course compression.

It’s somewhat basic right now. I set up defaults for most end-clients, meaning its easy to use and familiar feeling. I came to this configuration after working with clients for two years – listening to their complaints and slowly molding the defaults to what is here now.

The simplest incarnation is:

<cfoutput>
#application.formutils.tinymce(content=read.bio)#
</cfoutput>

This assumes you cached the CFC into an application variable called ‘formutils’, and a query named ‘read’ with a field called ‘bio’. That will generate the base code (put into the htmlhead by default), create the textarea named ‘content’, set up modified defaults for tinyMCE and then display it.

But you can get fancier:

<cfoutput>
#session.utils.tinymce(
	content=read.rightcolumn,
	element="rightcolumn",
	cssfile="/includes/css/common.css,/includes/css/tiny_dyn.cfm?csswidth=210px",
	resizing=false,
	loadbase=0
)#
</cfoutput>

That one will create a textarea with name and id of ‘rightcolumn’. It will also use specific css files. If you notice that last css file is a cfm page that dynamically creates the width of the page. This is awesome for giving the editor a real-time view of their page. Then it turns resizing off. Finally, with loadbase=0, the base of tinyMCE will not be loaded (this example is for a secondary tinyMCE instance in the same page).

Most of the defaults can be overridden with arguments as demonstrated above. However this function is not all-encompassing of tinyMCE’s many attributes. If you need more customizability, feel free to fork the git project, or simply ask me for the attribute you need inserted.

You can get this CF function directly from github: http://github.com/WebVeteran/cf-tinymce

Bonus example

A multilingual coldfusion application using tinymce for translations. One instance is the english, the other is spanish. Both use a very simple editor. It’s actually the advanced editor configured to mock the simple editor, but with a few extra buttons.

<cfoutput>
<tr>
	<td>
		#application.includes.tinymce(
			content=read.en,
			element="en",
			csswidth="444px",
			resizing=true,
			theme='advanced',
			theme_advanced_buttons1 = "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,bullist,numlist,|,undo,redo,|,code,cleanup",
			theme_advanced_buttons2 = "",
			theme_advanced_buttons3 = ""

		)#
	</td>
	<td>
		#application.includes.tinymce(
			content=read.es,
			element="es",
			csswidth="444px",
			resizing=true,
			theme='advanced',
			loadbase='0',
			language='es',
			theme_advanced_buttons1 = "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,bullist,numlist,|,undo,redo,|,code,cleanup",
			theme_advanced_buttons2 = "",
			theme_advanced_buttons3 = "",
			gecko_spellcheck = "false"
		)#
	</td>
</tr>
</cfoutput>

Output is:

two tinymce instances - click to view larger

CF TinyMCE CFC, ColdFusion, compression, function, JavaScript, TinyMCE