A big thank to Mr. Camden for giving me a few minutes of his time! With his insight I was able to remove the required Vscope argument. Instead, multiple instances per page are tracked through Request. No more required argument, and it’s backwards compatible again.
Grab the update here: http://github.com/WebVeteran/cf-tinymce/
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/
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:
With the CF gzip compressor now part of the TinyMCE, further development will commence at SourceForge. Right now (and just for link’s sake) it is at github.
Old: http://github.com/WebVeteran/tinymce-cf-gzip/
New: https://sourceforge.net/projects/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!
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.
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 =)
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 “&”. Which is nice. But if you edit that post again, WP re encodes ampersands again. Giving you “&&”. 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!
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.
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:
All you have to do is create a [/sourcecode] block, select the sourcecode block, select Preformatted from Tiny’s format menu, then paste in your code.
It should look like this:
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/
I did my homework before writing this plugin. I tried all of the following. All of which failed in one way or another.
Here are the plugins that I am currently running:
WHEW! That’s enough blogging for today. I gotta get some work done!
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.
ColdFusion, JavaScript, News, Scriptaculous, TinyMCE, WV File Manager, Web Coding
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Recent Comments