ColdFusion function: create tinyMCE instances

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
two tinymce instances - click to view larger

6 Replies to “ColdFusion function: create tinyMCE instances”

  1. I suppose that depends on your intended purpose. I use tinyMCE extensively in CMS admins (sometimes half a dozen different modules). But I also use it on the user side-for contact forms and other paragraph formatted content.
    Since it is to be used so much and in many different places I decided to make it a UDF and cache it per application.

  2. I am trying to get the tinyMCE editor to load in my CF page and I keep getting this error…
    Cannot invoke method tinymce on an object of type java.lang.String with named arguments.

    Use ordered arguments instead.

    Any idea why?
    Thanks, Peter

Comments are closed.