Why more CF developers choose FCKeditor, and a TinyMCE CFC
March 4th, 2009
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:
Recent Comments