CF TinyMCE 090612 – automatically handles multiple instance per page

I updated CF tinyMCE with a small nicety. It now automatically handles multiple instance per page. Previously, it would have to be invoked like so:

<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>

Notice the ‘loadbase=0’ argument on the second invocation. That told the previous version of CF TinyMCE to not all of TinyMCE again – just load the settings instead.

The new version automatically handles multiple instances and not loading TinyMCE all over again for subsequent invocations on the same page. Therefore, the new syntax example is:

<cfoutput>
<tr>
	<td>
		#application.includes.tinymce(
			VScope=Variables,
			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(
			VScope=Variables,
			content=read.es,
			element="es",
			csswidth="444px",
			resizing=true,
			theme='advanced',
			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>

No more loadbase! The key is the argument “Vscope=Variables”. That lets CF pass the Variables scope back and forth between a page and a function. It is a required argument which I am not happy about. But since it’s value never changes it’s not so bad.

Because of this fundamental change, CF TinyMCE 090612 is not backwards compatible. If anyone knows how to pass the Variables scope back and forth between a page and a function, without an argument like I am here – please let me know!

You can download CF TinyMCE at github: http://github.com/WebVeteran/cf-tinymce/

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