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/

Why more CF developers choose FCKeditor, and a TinyMCE CFC

Last week I posted a poll asking CF developers why they preferred FCKeditor over TinyMCE. Here are the results as of 3/2/09.

Quality / reliability 5 (50%)
It’s a simple tag (part of cftextarea) 3 (30%)
Extendability 2 (20%)

Which I have mixed feelings about. The first feeling is, ‘wow only 10 voters’ haha! Then, I thought that its great to use a built in function to get work done fast. That’s kind of what CF is all about. But at the same time I feel it’s more important to deliver to the end client the nicest looking/performing product.

Now, I don’t have anything against FCKeditor. But I really like TinyMCE. If you followed me on Twitter or this blog you’d know that. So what I’m prepared to do is give away a really great ColdFusion Function that makes rendering a TinyMCE instance a snap:

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

Which renders as:

<tr>
		<td>

		<textarea name='en' id='en' style='width:444px; height:350px; visibility:hidden;'></textarea>

			<script type="text/javascript" src="/includes/js/tiny_mce/tiny_mce_gzip.js"></script>
			<script language="javascript" type="text/javascript">
				tinyMCE_GZ.init({
					plugins : 'autosave,spellchecker,style,layer,table,save,advhr,advimage,advlink,emotions,insertdatetime,preview,media,searchreplace,print,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras',
					themes : 'advanced',
					languages : 'en,es',
					disk_cache : true,
					debug : false,
					suffix : ''
				});
			</script>

		<script language="javascript" type="text/javascript">
			var configArrayen = [{
				mode : 'exact',
				element : "en",
				theme : 'advanced',
				plugins : 'autosave,spellchecker,style,layer,table,save,advhr,advimage,advlink,emotions,insertdatetime,preview,media,searchreplace,print,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras',
				theme_advanced_disable : 'hr',
				theme_advanced_buttons1 : "bold,italic,underline,|,formatselect,|,bullist,numlist,|,undo,redo,|,code,cleanup",
				theme_advanced_buttons2 : "",
				theme_advanced_buttons3 : "",
				content_css : '/static/css/main.css',
				theme_advanced_styles : "",
				paste_auto_cleanup_on_paste : true,
				paste_convert_pageheaders_to_strong : false,
				paste_strip_class_attributes : 'all',
				paste_remove_spans : false,
				paste_remove_styles : false,
				force_br_newlines : true,
				force_p_newlines : false,
				relative_urls : false,
				gecko_spellcheck : true,
				convert_urls : true,
				theme_advanced_resizing_use_cookie : true,
				theme_advanced_resizing : true,
				theme_advanced_resize_horizontal : false,
				theme_advanced_toolbar_location : 'top',
				theme_advanced_toolbar_align : 'left',
				theme_advanced_statusbar_location : 'bottom',
				extended_valid_elements : 'br,a[name|href|target|title|onclick|class],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]',
				language : 'en',
				forced_root_block : '',
				theme_advanced_toolbar_location : "bottom",
				theme_advanced_toolbar_align : "center",
				theme_advanced_statusbar_location : 'none',
				entity_encoding : "raw"
			}];
			Event.observe(window,'load', function(){
				tinyMCE.settings = configArrayen[0];
				tinyMCE.execCommand('mceAddControl', false, 'en');
			});
		</script>

		</td>
		<td>

		<textarea name='es' id='es' style='width:444px; height:350px; visibility:hidden;'></textarea>

		<script language="javascript" type="text/javascript">
			var configArrayes = [{
				mode : 'exact',
				element : "es",
				theme : 'advanced',
				plugins : 'autosave,spellchecker,style,layer,table,save,advhr,advimage,advlink,emotions,insertdatetime,preview,media,searchreplace,print,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras',
				theme_advanced_disable : 'hr',
				theme_advanced_buttons1 : "bold,italic,underline,|,formatselect,|,bullist,numlist,|,undo,redo,|,code,cleanup",
				theme_advanced_buttons2 : "",
				theme_advanced_buttons3 : "",
				content_css : '/static/css/main.css',
				theme_advanced_styles : "",
				paste_auto_cleanup_on_paste : true,
				paste_convert_pageheaders_to_strong : false,
				paste_strip_class_attributes : 'all',
				paste_remove_spans : false,
				paste_remove_styles : false,
				force_br_newlines : true,
				force_p_newlines : false,
				relative_urls : false,
				gecko_spellcheck : true,
				convert_urls : true,
				theme_advanced_resizing_use_cookie : true,
				theme_advanced_resizing : true,
				theme_advanced_resize_horizontal : false,
				theme_advanced_toolbar_location : 'top',
				theme_advanced_toolbar_align : 'left',
				theme_advanced_statusbar_location : 'bottom',
				extended_valid_elements : 'br,a[name|href|target|title|onclick|class],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]',
				language : 'es',
				forced_root_block : '',
				theme_advanced_toolbar_location : "bottom",
				theme_advanced_toolbar_align : "center",
				theme_advanced_statusbar_location : 'none',
				entity_encoding : "raw"
			}];
			Event.observe(window,'load', function(){
				tinyMCE.settings = configArrayes[0];
				tinyMCE.execCommand('mceAddControl', false, 'es');
			});
		</script>

		</td>
</tr>

There’s a lot of good stuff going on in there. Lazy loading, multiple instances per page, good defaults, language support, etc etc. Here is a sample including multilingual spellchecking:

tinymce_cfc

TinyMCE CF GZip – now officially part of tinyMCE

I am very pleased to announce that my ColdFusion based compressor for TinyMCE has been adopted by Moxiecode’s for their official CF compressor.

Coldfusion Gzip Compressor 2.1.0 released

This version of the Coldfusion Gzip compressor is a complete rewrite that doesn’t require any jar file to be installed in the lib directory. The previous versions was basically written in Java and the cfm file only called the logic in this Java file. This was a major problem when the compressor was to be used on shared hosting servers since users can’t install these .jar files by themselves.

The rewrite of this compressor was done by Jules Gravinese. He will be the new maintainer for the Coldfusion compressor. So this release is also an introduction to a new team member.

We are trying to move TinyMCE from being a tightly maintained Moxiecode project to more of a community project. We recently added a new team page to the site that lists the members that are the core part of the TinyMCE community.

This is great news for shared hosting. Now you can run TinyMCE, compressed, without installing a jar file.

Many thanks to Artur Kordowski for his gzip work in Zip CFC.

You can look forward to tweaks and improvements over time!

Poll for ColdFusion Developers: why FCKeditor?

Last week I posted a poll asking CF developers which RTE they like to deploy and use themselves. Here are the results as of 2/24 midnight.

Deploy FCKeditor, use FCKeditor 13 (48.15%)

Deploy tinyMCE, use tinyMCE 12 (44.44%)

Deploy FCKeditor, use tinyMCE 2 (7.41% )

Delpoy tinyMCE, use FCKeditor 0 (0%)

Until today, FCK was more than a few votes ahead. I wondered why. And I found it odd that some deployed FCK but would rather use Tiny. So here is a new poll based on those results.

For those of you ColdFusion developers who prefer to deploy FCKeditor: why? Feel free to add more comments below.

Poll for ColdFusion Developers: tinyMCE vs FCKeditor

I’ve come to learn that CF8 uses FCKeditor when using the RTE with CFTEXTAREA. But I have never liked FCKeditor. Maybe it’s the look. Maybe it’s the bugginess (in all fairness that was a long time ago). To me tinyMCE just seems a whole lot better. Recently I re-wrote the tinyMCE CF GZIP Compressor, soon to be their official cf compressor… so I am definitely on their side of the fence.

Like CF’s AJAX libraries, I don’t use the built in libraries. I prefer Scriptaculous, of which I am also a contributor. Again, that’s where my hands are.

So it makes me ponder what other CFers are doing. Using the built in RTE, or tinyMCE? Feel free to comment, too.

If all three readers of my blog would vote I’d really appreciate it =)

[polldaddy poll=”1377915″]

WordPress Plugin, Visual Code Editor, posts and edits code snippets in wordpress’s visual editor

I will be moving my blog from blogCFC to WordPress. So I have it installed and played with skins and syntax highlighting… which is quite lacking.

The problem comes in when you edit your post twice. When you load that post again, WP converts ampersands into “&amp;”. Which is nice. But if you edit that post again, WP re encodes ampersands again. Giving you “&amp;&amp;”. Want to guess what happens if you save and load it again? 🙂

Now lets compound that with the visual editor, which automatically encodes for you as you type or paste. That only accelerates the process. And the fault here is with WP when it loads the post. Not with TinyMCE, at all.
Lets make matters even worse. WP’s init for TinyMCE is really screwy. Looking at the code you’d think they were rocket scientists. But… dang it… the defaults are horrible for programmers who want to blog!

  • Users have to switch to HTML or TEXT views to insert <pre> or <code> tags.
  • TinyMCE does not allow unknown attributes for tags like <pre line=”1″>.

That may sound really picky. But most syntax highlight plugins require either <pre> or <code> and to use special attributes in them to display properly. Some require the syntax to have all entities escaped, some require the opposite.  What a freaking nightmare.  So I set out to end this nonsense.

Enter Visual Code Editor. It’s a plugin I wrote for WordPress. Visual Code Editor makes it possible (and trouble free) to post and edit code snippets in wordpress’s visual editor.

  • Adds <pre> & <code> to block format menu
  • Allows extra attributes for compatibility in some syntax highlighters (ie, <pre lang=”php” line=’5′>)
  • Unescape WP’s double escaping of &
  • v1.1: Removes extra <pre> tags around SyntaxHighlighter Plus’s sourcecode blocks

And the nicest thing is… it’s a plugin! You don’t have to go around editing WP’s base installation. Download, extract, upload, activate, done.Coupled with the SyntaxHighlighter Plus plugin, you get results like this:

syntax highlight 

Syntax highlighter Plus runs through javascript on the client and expects the code to have entities encoded. Thanks to my plugin and TinyMCE, we’re golden. I chose Syntax highlighter Plus for a few reasons. 

  • it’s the easiest to use and is smart.
  • It runs in javascript, search engines do not see tons of inline css muddying the page.
  • The page also downloads faster because of that.
  • The ‘copy to clipboard’ does not require flash.

All you have to do is create a block, select the sourcecode block, select Preformatted from Tiny’s format menu, then paste in your code.

It should look like this:

syntax highlight 

The Preformatted area tells TinyMCE to leave the formatting the heck alone. makes Syntax highlighter Plus do it’s magic on the viewer side. And you can still edit all of your code in the visual editor. Awesome! 

I also left the door open for other syntax highlighters, which instead of using , use <pre lang=”xxx” [line=”5″]> or even <code>, etc.

Feel free to download the plugin, which is now in the WordPress PlugIn Directory! Yippee I learnt how ta use SVN today! http://wordpress.org/extend/plugins/visual-code-editor/

Plugins that failed to help

I did my homework before writing this plugin. I tried all of the following. All of which failed in one way or another.

  • Chili Code Highlighter
  • CodeHighlighter
  • Developer Formatter
  • Disable wpautop
  • Editor Extender
  • EmbedIt
  • Google Syntax Highlighter for WordPress
  • Preserve Code Formatting
  • Raw HTML capability
  • Text Control
  • TinyMCE Entities Patch
  • Code Snippet
  • Dean’s Code Highlighter
  • Highlight Source Pro
  • iG:Syntax Hiliter
  • Sniplets
  • Snippet Highlight
  • WP-CodeBox
  • WP-Syntax

Here are the plugins that I am currently running:

WHEW! That’s enough blogging for today. I gotta get some work done!

WVFM (WebVeteran’s ColdFusion File Manager) build 081014

I was able to give more hours to the wvfm. As planned, I started to incorporate Finder-like column navigation:

When clicking a dir the contents load on the right by an ajax function. The view automatically slides left to the new column.

Its sloppy looking right now. But the final omelet should be tasty.