This project has moved. For the latest updates, please go here.

ColorPickerMenu inserting <font>

Nov 20, 2009 at 6:21 PM

I was surprised to see the optional ColorPickerMenu inserting <font color="xxx"/> tags around selected text. I'd like to edit the script to use proper inline styles. Can anyone point me in the right direction? I'll keep looking but so far the relevant code has eluded me.

Nov 23, 2009 at 4:34 PM

Here is one solution. It turns out that the IE TextRange object is to blame for this and likely many other of the world's evils. I added this function to jHtmlArea:


wrapSelection: function(startTag, range) {
range = (range) ? range : this.getRange();
var tag = /^<(\w+)/.exec(startTag)[1];
var html = startTag + range.htmlText + "</" + tag + ">";
this.pasteHTML(html, range);

I updated pasteHTML as follows:

pasteHTML: function(html, range) {
// use given range if supplied or get new range r = (range) ? range : this.getRange();

This allowed me to updated jHtmlArea.ColorPickerMenu around line 20 to look like

jHtmlAreaColorPickerMenu($(".forecolor", this.toolbar), {
      colorChosen: function(color) {
            if ($.browser.msie) {
	        var tag = "<span style=\"color:" + color + "\">";
		editor.wrapSelection(tag, range);
            } else {

Using wrapSelection lets me specify whatever tag I want. This also let me add a usable blockquote function:

blockquote: function() { this.wrapSelection("<blockquote>"); }


This is only lightly tested so there could be issues with other browsers and scenarios but it's working well enough for my current need.