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

5 Replies to “Why more CF developers choose FCKeditor, and a TinyMCE CFC”

    1. haha!
      The previous poll had 14 people voting for FCKeditor (of 28 voters). So I guess it made sense that this number was much lower this time.

  1. Does TinyMCE allow for server-side spell checking? I am looking for a tool or extend something so that I can review every text box and textarea in a long form, perform a spell check and store the results in a table. So that later on when the long form is finally turned in, I can actually show the errors and let the user correct them. Does either Tinymce or ASpell allow for anything like that?

    Thanks,

    JW

  2. @James White
    Yes, that’s how its spell checking works (aside from gecko which can be disabled). It’s not a tinyMCE package that does the spellchecking though, its another package of choice that tinyMCE plugs into.

  3. Ok thanks. I am actually playing around with some CF code using ASpell now. I was able to get it working right after I sent you my query. Thanks for getting back to me.

    JW

Comments are closed.