TinyMCE ListBox Plugin for Merge Tags

Well, today I finally managed to cobble together the following solution for a problem I had whereby I wanted a plugin for TinyMCE whereby I could select a value from a drop down / listbox, and have it inserted into TinyMCE.

So here's how I did it:

First define a javascript array BEFORE initialising the TinyMCE editor. This allows you to create this array server side if you want (by writing a response stream declaring it if necessary), or allows you to control it per page. E.g:

var arrUserTags = new Array('{{Name}}','{{Address}}','{{Company}}');

I created a new plugin in tiny_mce/plugins/usertags/editor_plugin.js as follows:

(function() {
tinymce.create('tinymce.plugins.usertags', {  
init : function(ed, url) {
},  
createControl: function(n, cm) {      
switch (n) {          
case 'usertags':              
var mlb = cm.createListBox('usertags', {                   
title : 'Insert details    ',                   
onselect : function(v) {                        
tinyMCE.activeEditor.selection.setContent(v);                   
}              
});
        
//The array arrUserTags, must be defined before the editor is added!!! Or if you prefer, just ignore the array idea, and just do multiple mlb.add() statements.                             
for(i=0;i

This you can then register as a plugin in tinymce.

CompareValidator doesn't compare numeric amounts correctly

Well at least that is what I thought today!

I had a compare validator set on two text boxes that were used to enter monetary amounts. The validator was to ensure that box B was greater than Box A.

In this scenario, it worked:

Box A = 100, Box B = 200 = Fine

But...

Box A = 500, Box B = 1000 = Invalid

Why? Because I hadn't set the TYPE attribute of the validator to CURRENCY

D'oh!

TinyMCE UpdatePanel Javascript errors

I have spent days on this one, and it took myself and a colleague both working on it to find a solution that actually worked!

Here's the scenario.... you want to use TinyMCE, and have it working in an UpdatePanel. It sounds simple enough.

What I did was add the TinyMCE editor script, setup my tinyMCE.init() method, and hey presto, I got my editors. I set my code behind for my save button, and it fired fine when pressed, however, the editor disappeared! So, I moved my init function into the code behind, and registered it with the scriptmanager.registerclientscript method. This was fine, and when svaing my content, the editor did not disappear anymore - however, when I clicked the save button for a second time, I got a javascript error on the editor trying to access it's content.

The specific part of the javascript from tiny_mce.js was erroring on "return this.bodyElementthis.getDoc().body"

Anyway, I searched through many examples of how to solve this, including remove the editors before performing the postback, and eventually found a downloadable example that worked:

http://codeodyssey.com/archive/2007/7/18/updatepanel-tinymce-demo-with-project-zip-file

However, when I tried to use this in my application, with TinyMCE version 3.2.3, it didn't work. I copied over the version from this download, and then it seemed to fix the problem - but I lost some of the TinyMCE functionality!

Eventually, my colleague stumbled upon this absoluetly brilliant .NET extender, that handles everything for you, and allows you customise each editor independantly:

http://weblogs.asp.net/cjdevos/archive/2008/06/19/ajax-extender-for-tinymce-continued.aspx

So, if your having problems with TinyMCE and updatepanels - download it and use it!