WYSIWYG Preview Caret Position

[Chris]

You are welcomed, as always, to it Wormo. I didn't create the WYSIWYG so I'm not sure why I would be getting credit for it, give props to the Proboards development team!

Just one more thing, use the the visual/bbcode objects in the editors branch rather than _visualEditor/_bbcodeEditor because the former are what gets updated with any current info. The objects in the editors branch were created using the _visualEditor/_bbcodeEditor objects as a template and given extra stuff during the creation process so they are the true editors and will have powers the Dark Lord knows not. Use the templates only if you're making modifications prior to the creation of the WYSIWYG (e.g your code is running in header)

[Wormopolis]

you discover the ark of the covenant - everyone gets told of your adventure.

I have the dialog for color choices and mode working and validating entries. hitting apply runs the replacement function. I will go back and set all of them to editors.visual/bbcode. I didnt know there was a difference between them

[Wormopolis]

Well I have it working in

Firefox BBcode and Preview
Chrome BBcode and Preview
IE9 Preview

IE9 BBCode isnt respecting the range selection and just inserting it at the beginning. so Im ALMOST there. running some more tests tonight and this weekend.

[Wormopolis]

I dont have it

[Chris]

Oct 3, 2014 0:32:18 GMT -8 Wormopolis said:

Well I have it working in

Firefox BBcode and Preview
Chrome BBcode and Preview
IE9 Preview

IE9 BBCode isnt respecting the range selection and just inserting it at the beginning. so Im ALMOST there. running some more tests tonight and this weekend.

Maybe you should post the updated code snippet as well

[Wormopolis]

correction.. IE8 and IE9 will work correctly in bbcode if text is selected. if no text is selected then it inserts at beginning. I suspect I have to preserve caret position somehow like pebble did. all other browsers and visual mode in all tested browsers inserts it correctly in visual or text mode.

SPOILER: Click to show

    tmp=$('.wysiwyg-textarea').data('wysiwyg');
    if (document.selection) var IEhold=document.selection.createRange();
                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){
                            f=$('<span/>').get(0);

                            var c=tmp.editors.visual.range||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.pasteHTML(f.innerHTML);
                            c.collapse(false);
                            c.select()
                        }
                    }
                } else if (tmp.currentEditorName == "bbcode") {
                    if (IEhold && IEhold.text) {
                        IEhold.text='[smear:#'+smear_start_color+']'+IEhold.text+
                                    '[/smear:#'+smear_end_color+':'+smear_mode+']';  
                    } 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+']');        
                    }
                }

IEhold was the only way I could get it to work in IE8. as soon as you clicked the button, it would lose the selected text and nothing would get replaced after you closed the dialog. storing it in IEhold made it remember what was selected. that might be the key to remembering where the caret is for IE as well, I just ran out of time last night. again I think im close.

[Chris]

I do recall having to save the values for selectionStart and selectionEnd since they get tossed when the textarea blurs in IE (e.g. button clicked, dialog displayed etc.). Other browsers maintain those values

[Wormopolis]

I just realized even the standard editor button dont work in IE8 either.. so I might be beating a dead horse here...

[Chris]

Oct 4, 2014 2:36:17 GMT -8 Wormopolis said:

I just realized even the standard editor button dont work in IE8 either.. so I might be beating a dead horse here...

Hmmm, I just checked in IE8 (IE9 emulating IE8 actually) and it acts as if all the text in the bbcode textarea were selected and proceeds to wrap the entire text in any bbcode that was pushed, is that what you are seeing or is it simply not responding?

[Wormopolis]

no that is what I am seeing as well. I have been trying to get it to insert at caret in IE8 but it just kept pushing the smear tags to the front of the text area. only in IE8 though. all other browsers it seemed to work fine.

standard tags in IE9 will place at the caret, but in mine it is also pushing to the front. if I can get IE9 on board then I can just let IE8 go. soon PB wont support IE8 either. All browsers are now correctly surrounding selected text with smear tags. so I have that going for me. I have been trying to get it to save the range upon pressing the tray button, but nothing has worked so far. stackoverflow has seen a lot of hits from me lately.

[Chris]

I tracked it down to a bug in the proboards framework code, seems there was an update at some point taking the code from this // continuously save the selection/range (for IE's sake... ugh!)
$(this.textarea).bind('keyup.wysiwyg mouseup.wysiwyg', function() {
self.getRange();
});

to this

if($.browser.msie && parseInt($.browser.version<10)){
$(this.textarea).bind('keyup.wysiwyg mouseup.wysiwyg', function() {
self.getRange();
});
}


Notice it says parseInt($.browser.version<10) instead of parseInt($.browser.version)<10 which means that expression would always evaluate to NaN never binding the event and this is why the IE branch never updates the selected text range. This is probably a recent change since I've only seen this report so far which appears to be related (assuming the user is an IE hostage).

Bug alert Tim Camara

[Wormopolis]

well this is awkward...

I found a code on stackoverflow and modified it so it seems to work at inserting tags where the caret is and no selected text. in IE8 it is working for bbcode. however in visual it for some reason inserts it into the document body... not sure why. if text is selected in IE8 preview mode it goes into the editor area...

in IE9, however, everything is working. Firefox and chrome seem to be kosher as well.

this is the section that IE runs in visual mode:

SPOILER: Click to show

                        if(tmp.editors.visual.document.selection){
                            f=$('<span/>').get(0);                            
                            var c=tmp.editors.visual.range||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.pasteHTML(f.innerHTML);
                            c.collapse(false);
                            c.select()
                        }

if I can get the dang tags to get into the editor in IE8 I will call it a day

[Chris]

IE9 has the textarea.selectionStart so would take that branch instead of the older IE branch and given the bug noted in the previous post it should be clear why IE8 would be stuck using the initially created range and never update for any newly created ranges. Once range is set the internal code does Object.range||Object.getRange() meaning the only time getRange is called going forward is through event updates, butthe bug puts a kink in that plan. Since you are not making use of the internal code and instead doing the heavy lifting yourself then you could simply call getRange directly and ignore the existence of tmp.editors.visual.range

If using the internal code then simply correct the bug yourself by reissuing the faulty code with the parenthesis properly placed so it would then update the range on every keyup and mouseup

[Wormopolis]

I had tried that actually and it still seems to default to body. I traced c=tmp.editors.visual.getRange() and it returns IHTMLTextRange in IE8, so it seems like it should be going to the correct destination. oddly though, if I look at tmp.editors.visual.document, it doesnt seem to point to the iframe document. I have disabled the output when in IE8 visual for the moment. I will have to swing back around to this later.

[Chris]

Couldn't say for sure without viewing the overall code, I recall Todge stating rhe wysiwyg function we were collaborating on last year had exhibited that same behavior but cannot recall what was done to fix it (can't find the PM). What I think might be getting misunderstood though is the line var c = tmp.editors.visual.range || tmp.editors.visual.getRange(); need not be there because tmp.editors.visual.range would be static due to not getting updated (the aforementioned bug) so calling the getRange function directly instead (e.g var c = tmp.editors.visual.getRange();) would ensure an up-to-date range for your code to play with.