WYSIWYG Preview Caret Position

[Wormopolis]

here is current code:

SPOILER: Click to show

function editorSmear() {
    // a HUGE thank you to Eton for revealing the mystery of the WYSIWYG editor
    tmp=$('.wysiwyg-textarea').data('wysiwyg');
    if (document.selection) {
        var IEhold=tmp.editors[tmp.currentEditorName].getRange();
        //alert(IEhold.parentElement());
        if (tmp.currentEditorName=='bbcode') {
            tmp.editors[tmp.currentEditorName].textarea.focus();          
            //IE caret position from stackoverflow
            //http://stackoverflow.com/questions/3053542/how-to-get-the-start-and-end-points-of-selection-in-text-area/3053640#3053640
            
            range = document.selection.createRange();
            len = tmp.editors[tmp.currentEditorName].textarea.value.length;
            normalizedValue = tmp.editors[tmp.currentEditorName].textarea.value.replace(/\r\n/g, "\n");
            
            // Create a working TextRange that lives only in the input
            textInputRange = tmp.editors[tmp.currentEditorName].textarea.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());
            
            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = tmp.editors[tmp.currentEditorName].textarea.createTextRange();
            endRange.collapse(false);
            
            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;
                
                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
            var holdcaret=start;
        }
    }
    
    var dialogHTML='<br>Start Color: <input id="smearStart">'+
        '<br>End Color: <input id="smearEnd">'+        
        '<br>Mode: <select id="smearMode"><option value=0>Standard (color 1 -> color 2)</option>'+
        '<option value=1>Double Smear (color 1 -> color 2 -> color 1)</option>'+
        '<option value=2>Oversmear (color 1 -> mixed -> color 2)</option>'+
        '<option value=3>Invertsmear (color 1 -> inverted mix -> color 2)</option></select>';
    proboards.dialog("colorSmear_bbcode", {
        html : dialogHTML,
        title : "ColorSmear",
        hide: "puff",
        show: "fold",
        height : 250,
        width : 400,
        open: function(){
            $('div#colorSmear_bbcode').trigger('click');
        },
        resizable : false,
        autoOpen : true,
        buttons : [{
            text: "Apply",
            click: function() {
                var smear_start_color=$('div#colorSmear_bbcode input#smearStart').val();
                var smear_end_color=$('div#colorSmear_bbcode input#smearEnd').val();
                var smear_mode=$('div#colorSmear_bbcode select#smearMode').val();
                hold=smearValidateChoices(smear_start_color,smear_end_color);
                if (hold>0) {
                    //1=start,2=end,3=both
                    var alertMsg='';
                    if (hold==1 || hold==3) {
                        alertMsg+="Start Color";
                        $('div#colorSmear_bbcode input#smearStart').css('border','#FF0000 solid 2px');
                        if (hold==3) alertMsg+=' and ';
                    }
                    if (hold==2 || hold==3) {
                        alertMsg+="End Color";
                        $('div#colorSmear_bbcode input#smearEnd').css('border','#FF0000 solid 2px');
                    }
                    alertMsg+=' need to have values input.';
                    alert(alertMsg);
                    return;
                }
                
                tmp=$('.wysiwyg-textarea').data('wysiwyg');
                
                if (tmp.currentEditorName == "visual") {
                    doc=tmp.editors.visual.document;
                    f=doc.createDocumentFragment();
                    var d=tmp.editors.visual.selection||tmp.editors.visual.getSelection();
                    if(window.getSelection){
                       var c=tmp.editors.visual.range||tmp.editors.visual.getRange();
                        var e=c.extractContents();
                        f.appendChild(doc.createTextNode('[smear:#'+smear_start_color+']'));
                        f.appendChild(e);
                        f.appendChild(doc.createTextNode('[/smear:#'+smear_end_color+':'+smear_mode+']'));
                        try {
                            c.insertNode(f);
                        }               
                        catch(err) {
                            
                        }
                        c.collapse(true);
                       // c.setEndAfter(f);
                        d.removeAllRanges();
                        d.addRange(c);
                        d.collapseToEnd()
                    } else {
                        if(tmp.editors.visual.document.selection && parseInt($.browser.version)>8){
                            f=$('<span/>').get(0);                            
                        //    var c=tmp.editors.visual.range||tmp.editors.visual.getRange();
                            var c=tmp.editors.visual.getRange();
                                f.appendChild(doc.createTextNode('[smear:#'+smear_start_color+']'));
                                f.appendChild(doc.createTextNode(c.text));
                                f.appendChild(doc.createTextNode('[/smear:#'+smear_end_color+':'+smear_mode+']'));
                                c.select();
                                c.pasteHTML(f.innerHTML);
                                c.collapse(false);
                                c.select()
                        }                        
                    }
                } else if (tmp.currentEditorName == "bbcode") {
                    if (IEhold) {
                        if (IEhold.text) {
                            IEhold.text='[smear:#'+smear_start_color+']'+IEhold.text+
                                '[/smear:#'+smear_end_color+':'+smear_mode+']';  
                        } else {
                            var holdTAvalue=tmp.editors[tmp.currentEditorName].getContent();
                            tmp.editors[tmp.currentEditorName].setContent(holdTAvalue.substr(0,holdcaret) +
                                                                          '[smear:#'+smear_start_color+']'+
                                                                          '[/smear:#'+smear_end_color+':'+smear_mode+']' +
                                                                          holdTAvalue.substr(holdcaret));
                            
                            
                        }           
                    } else {
                        tmp.editors[tmp.currentEditorName].replaceSelection('[smear:#'+smear_start_color+']'+
                                                                            (tmp.editors[tmp.currentEditorName].getSelectedText() ? tmp.editors[tmp.currentEditorName].getSelectedText() : '')+
                                                                            '[/smear:#'+smear_end_color+':'+smear_mode+']');        
                    }
                }
                $(this).dialog("close");
            }
        }]
    });
    $('div#colorSmear_bbcode').trigger('click');
    $('div#colorSmear_bbcode').find('input#smearStart, input#smearEnd').bind('focusin',function(){
        var targetSpot=$(this);
        $(this).colorPicker();
        $(this).bind('mouseout',function(){
            $('div#colorPicker div#colorPicker-ok-button').show().unbind('click').bind('click',function(){
                targetSpot.val($('div#colorPicker div#colorPicker-input input').val());
                targetSpot.css('border','');
                $('div#colorPicker').hide();
            });
            $('div#colorPicker div#colorPicker-cancel-button').show().bind('click',function() {
                $('div#colorPicker').hide();
            });
        });
    });
    if (!IEhold) $('div#colorSmear_bbcode').find('input#smearStart, input#smearEnd').click();
}

[Tim Camara]

Alright, since it was so simple, a bugfix for the error Chris found is in our internal testing branch now. With any luck, it'll go live with the next code push, probably either today or tomorrow.

[Wormopolis]

Probably wont affect my ability to push content at caret right?

[Todge]

From what I recall we did get it to work in IE8, but only so long as there was content already in the editor.

It nay be defuuct with the upcoming bug fix, but I'll try to track down the PM conversation too.

[Wormopolis]

If I have selected text, I have it working. its when the caret is just blinking by itself that it gets weird. but bbcode I have it inserting NEAR where it was.. the math seems to need some tweaking.

IE8 preview is the one where things were bad and it was inserting into the document instead of the iframe.

[Todge]

Yup, I had that problem too, but Eton, the genius that he is, found a fix.

The problem back then seemsed to be that there were constant updates to the wysiwyg editor making making a lot of the fixes Eton helped me with useless, but, at least for a while now, everything seems to be constant.

I can't check anything using IE8 as I'm still restricted to a tablet, so I'm unsure whether any of my plugins are functioning as expected in IE8, for all I know none of them are working.

The last I updated was the smilies plugin, and I've not had any 'help me' messages, so I assume that one works at least.

[Chris]

Oct 5, 2014 21:39:06 GMT -8 Wormopolis said:

here is current code:

SPOILER: Click to show

function editorSmear() {
    // a HUGE thank you to Eton for revealing the mystery of the WYSIWYG editor
    tmp=$('.wysiwyg-textarea').data('wysiwyg');
    if (document.selection) {
        var IEhold=tmp.editors[tmp.currentEditorName].getRange();
        //alert(IEhold.parentElement());
        if (tmp.currentEditorName=='bbcode') {
            tmp.editors[tmp.currentEditorName].textarea.focus();          
            //IE caret position from stackoverflow
            //http://stackoverflow.com/questions/3053542/how-to-get-the-start-and-end-points-of-selection-in-text-area/3053640#3053640
            
            range = document.selection.createRange();
            len = tmp.editors[tmp.currentEditorName].textarea.value.length;
            normalizedValue = tmp.editors[tmp.currentEditorName].textarea.value.replace(/\r\n/g, "\n");
            
            // Create a working TextRange that lives only in the input
            textInputRange = tmp.editors[tmp.currentEditorName].textarea.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());
            
            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = tmp.editors[tmp.currentEditorName].textarea.createTextRange();
            endRange.collapse(false);
            
            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;
                
                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
            var holdcaret=start;
        }
    }
    
    var dialogHTML='<br>Start Color: <input id="smearStart">'+
        '<br>End Color: <input id="smearEnd">'+        
        '<br>Mode: <select id="smearMode"><option value=0>Standard (color 1 -> color 2)</option>'+
        '<option value=1>Double Smear (color 1 -> color 2 -> color 1)</option>'+
        '<option value=2>Oversmear (color 1 -> mixed -> color 2)</option>'+
        '<option value=3>Invertsmear (color 1 -> inverted mix -> color 2)</option></select>';
    proboards.dialog("colorSmear_bbcode", {
        html : dialogHTML,
        title : "ColorSmear",
        hide: "puff",
        show: "fold",
        height : 250,
        width : 400,
        open: function(){
            $('div#colorSmear_bbcode').trigger('click');
        },
        resizable : false,
        autoOpen : true,
        buttons : [{
            text: "Apply",
            click: function() {
                var smear_start_color=$('div#colorSmear_bbcode input#smearStart').val();
                var smear_end_color=$('div#colorSmear_bbcode input#smearEnd').val();
                var smear_mode=$('div#colorSmear_bbcode select#smearMode').val();
                hold=smearValidateChoices(smear_start_color,smear_end_color);
                if (hold>0) {
                    //1=start,2=end,3=both
                    var alertMsg='';
                    if (hold==1 || hold==3) {
                        alertMsg+="Start Color";
                        $('div#colorSmear_bbcode input#smearStart').css('border','#FF0000 solid 2px');
                        if (hold==3) alertMsg+=' and ';
                    }
                    if (hold==2 || hold==3) {
                        alertMsg+="End Color";
                        $('div#colorSmear_bbcode input#smearEnd').css('border','#FF0000 solid 2px');
                    }
                    alertMsg+=' need to have values input.';
                    alert(alertMsg);
                    return;
                }
                
                tmp=$('.wysiwyg-textarea').data('wysiwyg');
                
                if (tmp.currentEditorName == "visual") {
                    doc=tmp.editors.visual.document;
                    f=doc.createDocumentFragment();
                    var d=tmp.editors.visual.selection||tmp.editors.visual.getSelection();
                    if(window.getSelection){
                       var c=tmp.editors.visual.range||tmp.editors.visual.getRange();
                        var e=c.extractContents();
                        f.appendChild(doc.createTextNode('[smear:#'+smear_start_color+']'));
                        f.appendChild(e);
                        f.appendChild(doc.createTextNode('[/smear:#'+smear_end_color+':'+smear_mode+']'));
                        try {
                            c.insertNode(f);
                        }               
                        catch(err) {
                            
                        }
                        c.collapse(true);
                       // c.setEndAfter(f);
                        d.removeAllRanges();
                        d.addRange(c);
                        d.collapseToEnd()
                    } else {
                        if(tmp.editors.visual.document.selection && parseInt($.browser.version)>8){
                            f=$('<span/>').get(0);                            
                        //    var c=tmp.editors.visual.range||tmp.editors.visual.getRange();
                            var c=tmp.editors.visual.getRange();
                                f.appendChild(doc.createTextNode('[smear:#'+smear_start_color+']'));
                                f.appendChild(doc.createTextNode(c.text));
                                f.appendChild(doc.createTextNode('[/smear:#'+smear_end_color+':'+smear_mode+']'));
                                c.select();
                                c.pasteHTML(f.innerHTML);
                                c.collapse(false);
                                c.select()
                        }                        
                    }
                } else if (tmp.currentEditorName == "bbcode") {
                    if (IEhold) {
                        if (IEhold.text) {
                            IEhold.text='[smear:#'+smear_start_color+']'+IEhold.text+
                                '[/smear:#'+smear_end_color+':'+smear_mode+']';  
                        } else {
                            var holdTAvalue=tmp.editors[tmp.currentEditorName].getContent();
                            tmp.editors[tmp.currentEditorName].setContent(holdTAvalue.substr(0,holdcaret) +
                                                                          '[smear:#'+smear_start_color+']'+
                                                                          '[/smear:#'+smear_end_color+':'+smear_mode+']' +
                                                                          holdTAvalue.substr(holdcaret));
                            
                            
                        }           
                    } else {
                        tmp.editors[tmp.currentEditorName].replaceSelection('[smear:#'+smear_start_color+']'+
                                                                            (tmp.editors[tmp.currentEditorName].getSelectedText() ? tmp.editors[tmp.currentEditorName].getSelectedText() : '')+
                                                                            '[/smear:#'+smear_end_color+':'+smear_mode+']');        
                    }
                }
                $(this).dialog("close");
            }
        }]
    });
    $('div#colorSmear_bbcode').trigger('click');
    $('div#colorSmear_bbcode').find('input#smearStart, input#smearEnd').bind('focusin',function(){
        var targetSpot=$(this);
        $(this).colorPicker();
        $(this).bind('mouseout',function(){
            $('div#colorPicker div#colorPicker-ok-button').show().unbind('click').bind('click',function(){
                targetSpot.val($('div#colorPicker div#colorPicker-input input').val());
                targetSpot.css('border','');
                $('div#colorPicker').hide();
            });
            $('div#colorPicker div#colorPicker-cancel-button').show().bind('click',function() {
                $('div#colorPicker').hide();
            });
        });
    });
    if (!IEhold) $('div#colorSmear_bbcode').find('input#smearStart, input#smearEnd').click();
}

If I have selected text, I have it working. its when the caret is just blinking by itself that it gets weird. but bbcode I have it inserting NEAR where it was.. the math seems to need some tweaking.

IE8 preview is the one where things were bad and it was inserting into the document instead of the iframe.

It should be noted that since IE9 was the first Microsoft browser to support the W3C selection model it would be taking the same path browsers such as Firefox and Chrome takes and never hit that IE-only branch so are you saying IE9 exhibits the behavior described above or just IE8? The thing even with IE9 however was it lost the values for textare.selectionStart and textarea.selectionEnd whenever the textarea lost the focus which is why those values have to be saved then restored when inserting (which the WYSIWYG does). As for the "NEAR" that sounds like a bug I encountered in ancient IE,

Sept 15, 2014 8:32:19 GMT -8 Tim Camara said:

Now if we could just drop IE8 support, we probably wouldn't need this shiv at all.

when I was creating some old V4 codes, where the insertion point was incorrectly offset by the number of non-printable characters that preceded it (e.g linefeeds, carriage returns). Back then what I did to fix it was count up those non-printable characters preceding the insertion point and added them to the final position to get the true insertion point.


All of this however is handled internally by the WYSIWYG so should be opaque, the reason we're even talking about math is because the code being used is not using the WYSIWYG except to query it for selection ranges and instead wants to do the heavy lifting by itself. It would be easier to use what is there and avoid reinventing the wheel.

Oct 7, 2014 9:01:58 GMT -8 Todge said:

Yup, I had that problem too, but Eton, the genius that he is, found a fix.

The problem back then seemsed to be that there were constant updates to the wysiwyg editor making making a lot of the fixes Eton helped me with useless, but, at least for a while now, everything seems to be constant.

I can't check anything using IE8 as I'm still restricted to a tablet, so I'm unsure whether any of my plugins are functioning as expected in IE8, for all I know none of them are working.

The last I updated was the smilies plugin, and I've not had any 'help me' messages, so I assume that one works at least.

I haven't checked myself but since the addTag function specifically sets up a mouseup/keyup handler in order to include quick reply in range updates as well it would be unaffected by the mentioned bug.

[Wormopolis]

I would have loved to use built in functions, but they required matching tags. If there was a function that gave me the ability to define a beginning and end tag I would gladly ride that train.

All w3 compliant browsers are working flawlessly. This was more an exercise in backwards compatibility before someone started giving me grief over not making it work in legacy versions. To summarize what it does currently :

In IE8
In visual mode with text selected - surrounds text with my tags
In visual mode with no text selected - inserts tags into document body instead of iframe body
In bbcode mode with text selected - surrounds text with my tags
In bbcode mode with no text selected - attempts to locate caret and insert tags but math in function needs refining because its offset by new lines even though its supposed to account for them. I'm still tweaking.

In IE9
In visual and bbcode mode with text selected - surrounds selection with my tags
In visual mode with no text selected - inserts tags at caret
In bbcode mode with no text selected - attempts to find caret and insert. Math is also off a slight bit.


I'm going to wait until after the revision tom just made is live before attempting anymore. Just in case I put a bunch of effort into it and the revision undoes it. I could submit to library right now and still sleep at night.

Thank you for your continued help and interest!

[Chris]

The replaceSelection as I mentioned before requires no start/end tags as in this case where you are working with textnodes. Basically you grab the selection, add the text to the start and the end as in the example I gave then use replaceSelection to replace the current selection with your custom modified selection complete with racing stripes and mag wheels.

I'm not totally familiar with the unconventional format of your smear tag but I created a mockup function that includes support for ancient IE and inserts a specified hex color in the ending tag (?)


function smearSelection(hexColor) {
var wy = $('.wysiwyg-textarea').data('wysiwyg'); //this could be saved in a global or closure scope to save time;
if (wy.currentEditorName == "bbcode") {
var text = wy.editors.bbcode.getSelectedText();
text = '[smear]' + (text || "") + '[/smear:#'+hexColor+']';
wy.editors.bbcode.replaceSelection(text);
} else if (wy.currentEditorName == "visual") {
var doc = wy.editors.visual.document
if (window.getSelection) { // W3C branch
var frag = wy.editors.visual.getRange().cloneContents();
frag.appendChild(doc.createTextNode('[/smear:#'+hexColor+']'));
frag.insertBefore(doc.createTextNode("[smear]"), frag.firstChild);
wy.editors.visual.replaceSelection(frag);
} else if (document.selection) { //ancient IE/Opera branch
var text = wy.editors.visual.getRange().htmlText;
text = '[smear]' + (text || "") + '[/smear:#'+hexColor+']';
wy.editors.visual.getRange().pasteHTML(text)
}
}
}


Keep in mind that it is quite possible a user could partially select text in one element and run across boundaries into another element

example:
<b>This text is bold</b> and <i>this text is italicized</i>

How that gets handled is entirely up to the browser and I suspect could be a source of headaches. But that is on the visual side, on the bbcode side Proboards handles the conversion without any browser auto-corrections but it does have some problems. Take for example that same example above but entered on the bbcode side

example:
[b]This text is bold[/b] and [i]this text is italicized[/i]

if I were to hit the strikethrough at that point to surround the selection I would end up with the following malformed bbcode

example:
[b]This [s]text is bold[/b] and [i]this text is ital[/s]icized[/i]

Switch to preview then back and you'll see an attempt to correct the structure which will undoubtedly have orphaned bbcode tags.

Edit:

---

I'm not sure if it would be desirable to break the smear into discrete parts in such  situations since I assume it does some sort of linear gradient progression but it beats the alternative and could probably be worked around by tagging the splits as originating from a single tag thus allowing any progression to resume rather than start over.

Anyway, if the user ends up selecting text across tag boundaries on the bbcode side then this edit should split the selections to only text to make it smear-worthy

example:
[b]This [smear]text is bold[/smear:#fefefe][/b][smear] and [/smear:#fefefe][i][smear]this text is ital[/smear:#fefefe]icized[/i]

SPOILER: Click to show


function smearSelection(hexColor) {
var wy = $('.wysiwyg-textarea').data('wysiwyg'); //this could be saved in a global or closure scope to save time;
var startTag = '[smear]';
var endTag = '[/smear:#'+hexColor+']';
if (wy.currentEditorName == "bbcode") {
var text = wy.editors.bbcode.getSelectedText()||"";
var bbtags = [endTag];
text = text.replace(/\[(\/)?(\w+).*?\]/gm, function(m,p1,p2){
p2 = (p2||"").toLowerCase();
//if its a tag without a closer then no action needed
if(p2 == "br" || p2 == "hr") return m;
if(p1){ //closing tag
bbtags.push(endTag)
return (endTag + m + startTag);
}else{
if(bbtags.length){
bbtags.push(endTag);
return (bbtags.pop() + m + startTag);
}
return m;
}
}).replace(new RegExp((startTag+endTag).replace(/([\[\]\/])/g,"\\$1"),"g"),""); //toss empties
text = startTag + text + endTag;
wy.editors.bbcode.replaceSelection(text);
} else if (wy.currentEditorName == "visual") {
var doc = wy.editors.visual.document
if (window.getSelection) { // W3C branch
var frag = wy.editors.visual.getRange().cloneContents();
frag.appendChild(doc.createTextNode(endTag));
frag.insertBefore(doc.createTextNode("[smear]"), frag.firstChild);
wy.editors.visual.replaceSelection(frag);
} else if (document.selection) { //ancient IE branch
var text = wy.editors.visual.getRange().htmlText;
text = startTag + (text || "") + endTag;
wy.editors.visual.getRange().pasteHTML(text)
}
}
return "undefined" != typeof frag ? frag.innerHTML : text;
}


[Wormopolis]

I swear I tried replace Selection back at the start of this and I was getting a "node does not exist" error or something. I will insert that into the button function when I get home tonight and let you know the new results. I really do appreciate that you have invested time in this. It doesnt show, but I have been trying all sorts of routines found on stack overflow to catch the right spot. I know you dont have IE8 so I will see what your bbcode section does in it.

[Wormopolis]

ok so here are the results:

Firefox
-BBcode mode
nothing in textarea, places tags in text area - CHECK
text in textarea, caret somewhere in middle of text without selection, places tags where caret was - CHECK
text in textrea, text selected, surrounds selection with tags - CHECK
-Preview Mode
nothing in textarea, places tags in text area - CHECK
text in textarea, caret somewhere in middle of text without selection, places tags where caret was - CHECK
text in textrea, text selected, surrounds selection with tags - CHECK


IE8
-BBcode mode
nothing in textarea, places tags in text area - CHECK
text in textarea, caret somewhere in middle of text without selection, places tags at beginning of all text
text in textrea, text selected, places tags at beginning of all text
-Preview Mode
nothing in textarea, places tags into document body instead of iFrame
text in textarea, caret somewhere in middle of text without selection, places tags into document body instead of iFrame
text in textrea, text selected, places tags into document body instead of iFrame

IE9
-BBcode mode
nothing in textarea, places tags in text area - CHECK
text in textarea, caret somewhere in middle of text without selection, places tags at beginning of all text
text in textrea, text selected, places tags at beginning of all text
-Preview Mode
nothing in textarea, places tags into textarea - CHECK
text in textarea, caret somewhere in middle of text without selection, places tags at beginning of all text
text in textrea, text selected, places tags at beginning of all text

SPOILER: Click to show

function smearSelection(stColor, enColor, smMode) {
    var wy = $('.wysiwyg-textarea').data('wysiwyg'); //this could be saved in a global or closure scope to save time;
    if (wy.currentEditorName == "bbcode") {
        var text = wy.editors.bbcode.getSelectedText();
        text = '[smear:#'+stColor+']' + (text || "") + '[/smear:#'+enColor+':'+smMode+']';
        wy.editors.bbcode.replaceSelection(text);
    } else if (wy.currentEditorName == "visual") {
        var doc = wy.editors.visual.document
            if (window.getSelection) { // W3C branch
                var frag = wy.editors.visual.getRange().cloneContents();
                frag.appendChild(doc.createTextNode('[/smear:#'+enColor+':'+smMode+']'));
                frag.insertBefore(doc.createTextNode("[smear:#"+stColor+"]"), frag.firstChild);
                wy.editors.visual.replaceSelection(frag);
            } else if (document.selection) { //ancient IE/Opera branch
                var text = wy.editors.visual.getRange().htmlText;
                text = '[smear:#'+stColor+']' + (text || "") + '[/smear:#'+enColor+':'+smMode+']';
                wy.editors.visual.getRange().pasteHTML(text)
            }
    }
}

the tray button calls forth a custom dialog box. hitting ok validates both colors are chosen and then passes colors and mode to smearSelection()

it might be useful to grab the editor and/or editor.getSelection/getSelectedText() as soon as the button is pressed before the dialog opens and pass that along to the function? Im going to make another attempt this weekend as well. perhaps its goign to require a merging of the two codes.

[Chris]

A few more questions then, are there remnants of the stackoverflow code still at play somewhere in the overall code perhaps manipulating the WYSIWYG? An outside influences such as that would undoubtedly have an unknown effect and could interfere with the internal operations of the WYSIWYG. Do those IE8 anomalies occur when using the standard buttons as well?

What I suggested earlier about running the function from a javascript console (but this time without the plugin running) would test for plugin interference. Select some text in the bbcode/visual then run the function from the console passing it some test parameters and see if that still produces anomalies in IE8. The reason I suggest this is because although you are correct that I no longer have IE8 (I might have it in an Oracle VM box but haven't messed with that in years) my testing with IE9 running in IE8 emulation mode showed no such anomalies with me and I did verify that it takes the path less traveled unlike its younger IE9 brother.

[Wormopolis]

I had commented out everything from the original function except the dialog stuff. I made your test a seperate function that was called from the apply button in the dialog. I will try your function from the console tonight after work.

the console though throws the additonal difference of NOT bringing up a dialog box when the button is pressed. it might be that act alone that is throwing off IE. In my original stuff I was storing all the getrange stuff as soon as the button was pressed and before the dialog was opened. so it might just require doing that again.

IE9 results added intomy post above

[Chris]

The WYSIWYG stores the ranges internally and with the new update push this morning (up to forum_191.js now) it SHOULD be back to storing for IE8 as well but to simulate a loss of focus from the console just click on something else on the page before running it

[Wormopolis]

I got all excitied because I thought it was working... then I realized I was still in firefox and not IE...

IE8 had no changes from above results when using dialog after button. trying just the function from console now.

EDIT
running from console in IE8 worked on all 6 tests.  so its indeed the act of bringing up the dialog OR clicking the button itself that is clearing the selection.  Im going to try calling the function as soon as the button is pressed to see what happens.   

EDIT 2
so weird...
in BBcode mode, calling the function before the dialog worked for all 3 tests.  then the dialog opens and it pushes it to start of text.
in preview mode, selecting actual text, the force function worked, but dialog pushed to document body
with just caret in text, both force and dialog pushed to body
with no text in box, both force and dialog pushed to body

so it seems as if I need to somehow save the selection BEFORE the button is clicked.  Im going to try a mouseover on the smear button and push the selection to a global scope.  see what that does.  it seems dirty.  maybe I just need to somehow throw focus back on the textarea?