Quicktags editor + createDelegate issue

[moraes]

Hi.

I've made a port from Alex King's JS Quicktags to use with YUI.ext Toolbar. The result is here:

http://tipos.org/demos/quicktags/

It works very well on FF/Windows, but there is one problem on IE: when you select a text to apply a tag, it ignores document.selection.createRange(). Maybe it is related to how createDelegate() works. This is how buttons are added (this.b is an array of buttons definitions):


tb.addButton({className: this.b[i].id, text: this.b[i].text, click: this.insertTag.createDelegate(this, [i])});

And this is the IE part in the insertTag() function:

insertTag : function(i) {
//IE support
if (document.selection) {
this.f.focus();
sel = document.selection.createRange();
if (sel.text.length > 0) {
sel.text = this.b[i].tagStart + sel.text + this.b[i].tagEnd;
}
else {
if (!this.checkOpenTags(i) || this.b[i].tagEnd == '') {
sel.text = this.b[i].tagStart;
this.addTag(i);
}
else {
sel.text = this.b[i].tagEnd;
this.removeTag(i);
}
}
this.f.focus();
}
//MOZILLA/NETSCAPE support
...

Despite a text is selected in the textarea, sel.text.length is always 0. Any clues?

[jack.slocum]

Try removing the focus() call from the beginning. I think focus() will blow away the selection. I could be wrong though.

[moraes]

Unfortunately it didn't work. Removing focus(), the tag is inserted in the toolbar button instead of the textarea.

[jack.slocum]

I just set up a page on it's own, the selection is lost when you click and focus doesn't appear to bring it back.

[jack.slocum]

This is a different library but it should help you with it. IE wipes the selection when you click and you will have to store it when it's created to later do what you want.

http://www.telerik.com/community/forums/thread/b311D-edhdk.aspx

[moraes]

Ok, I'll take a look.

In the demo, it works fine on IE:
http://alexking.org/projects/js-quicktags/demo/index.html

But not using a YUI.ext toolbar + the click event (although for FF it is still fine). Somewhere in the middle it loses the selection on IE. Weird. I'll keep trying.

[jack.slocum]

I just swapped my local test to use a button and it works. I guess buttons don't steal selection.

[jack.slocum]

I got ya covered! Here's a monster patch, include it anywhere after yui-ext.js. The change was the addition of the IE only attribute unselectable="on".



YAHOO.ext.ToolbarButton.prototype.init = function(appendTo){
var element = document.createElement('span');
element.className = 'ytb-button';
element.unselectable = 'on';
if(this.id){
element.id = this.id;
}
this.disabled = (this.disabled === true);
var inner = document.createElement('span');
inner.className = 'ytb-button-inner ' + this.className;
inner.unselectable = 'on';
if(this.tooltip){
element.setAttribute('title', this.tooltip);
}
if(this.style){
YAHOO.ext.DomHelper.applyStyles(inner, this.style);
}
element.appendChild(inner);
appendTo.appendChild(element);
this.el = getEl(element, true);
inner.innerHTML = (this.text ? this.text : '');
this.el.mon('click', this.onClick, this, true);
this.el.mon('mouseover', this.onMouseOver, this, true);
this.el.mon('mouseout', this.onMouseOut, this, true);
};

[moraes]

Yes, it worked! :D

Thank you very much, Jack. I'd never figure out this patch.

[jack.slocum]

It took me a little longer than usual... sorry about that. It's 9am and I've been up all night. :)

[moraes]

I should have pointed the demo before. It seems it gave you a good clue.

[jack.slocum]

As soon as I saw the hideous buttons I knew there had to be a reason he was using them. :D

[moraes]

How about a section on this forum where people could share what they have done with YUI.ext? I would post this quicktags + YUI.ext toolbar combination there. It's the WordPress basic editor, plus a spice. :D

[jack.slocum]

Good idea. I will add it.