Appending data to a post via javascript

[MarkFL]

Hello all,

I help administrate a math forum running vBulletin 4.2.1. I have recently added an element to the editpost, newreply and newthread templates that introduces a live preview of LaTeX to aid in debugging code more efficiently than using the "Preview Post" function repeatedly.

Within this element, I have an input button that, using the onclick event, will copy the value of an internal textarea element to the post body using the javascript code:

document.getElementsByClassName('cke_source')[0].value += document.getElementById('MathInput').value

This works fine unless the user has opted for the WYSIWYG editor, in which case the DOM is constructed differently.

My question: is there a way to append data to the post message that will work regardless of the editor chosen by the user? I have tried manipulating {vb:raw post.message} to no avail.

I appreciate any insights into how to get this to work.

Best Regards,

Mark.

[MarkFL]

I figured out how to accomplish inserting data into a post message regardless of editor mode (that works with Firefox 29 and Chrome 35), and thought it would be good etiquette to share my findings here.

I have a textarea element with id="MathInput" whose contents I wish to insert into the post message at the current cursor location within the post message when a "Copy to Post" button is clicked. I want the cursor to be located at the end of the inserted data after the operation. This is the function that does this:

function copyMathToPost()
{
    var content = document.getElementById('MathInput').value, el = document.getElementsByClassName('cke_source')[0];
    if (el)
    {
        var pos = getCaretPosition(el);
        el.value = el.value.substr(0, pos) + content + el.value.substr(pos);
        setCaretPosition(el,pos + content.length);
        el.focus();
    }
    else
    {
        var iFrame = document.getElementsByTagName('iframe')[0];
        insertHtmlAtCursor(iFrame,content);
        moveCaret(iFrame, -1);
        moveCaret(iFrame, 1);
    }
}

Here are the supporting functions:

function getCaretPosition(el)
{ 
    if (el.selectionStart)
    { 
        return el.selectionStart; 
    }
    else if (document.selection)
    {
        el.focus(); 
        var r = document.selection.createRange(); 
        if (r == null)
        { 
            return 0; 
        } 
        var re = el.createTextRange(), rc = re.duplicate(); 
        re.moveToBookmark(r.getBookmark()); 
        rc.setEndPoint('EndToStart', re); 
        return rc.text.length; 
    }  
    return 0; 
}

function setCaretPosition(ctrl,pos)
{
    if(ctrl.setSelectionRange)
    {
        ctrl.focus();
        ctrl.setSelectionRange(pos,pos);
    }
    else if(ctrl.createTextRange)
    {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character',pos);
        range.moveStart('character', pos);
        range.select();
    }
}

function insertHtmlAtCursor(iFrame,html)
{
    var sel, range, node;
    html = html.replace(/\r\n?|\n/g, '<br>');
    if (iFrame.contentWindow.getSelection && iFrame.contentWindow.getSelection().getRangeAt)
    {
        sel = iFrame.contentWindow.getSelection();
        try{range = sel.getRangeAt(0);}
        catch (e){alert("This function is not supported by your browser. Please switch editor to Source Mode.");}
        node = range.createContextualFragment(html);
        range.insertNode(node);
        range = range.cloneRange();
        range.collapse();
        sel.removeAllRanges();
        sel.addRange(range);
    }
    else if (iFrame.contentWindow.selection && iFrame.contentWindow.selection.createRange)
    {
        iFrame.contentWindow.selection.createRange().pasteHTML(html);
    }
    else
    {
        alert("This function is not supported by your browser. Please switch editor to Source Mode.");
    }
    iFrame.focus();
}

function moveCaret(win, charCount)
{
    var sel, range;
    if (win.contentWindow.getSelection)
    {
        sel = win.contentWindow.getSelection();
        if (sel.rangeCount > 0)
        {
            var textNode = sel.focusNode;
            var newOffset = sel.focusOffset + charCount;
            sel.collapse(textNode, newOffset);
        }
    }
    else if (sel = win.contentDocument.selection)
    {
        if (sel.type != "Control")
        {
            range = sel.createRange();
            range.move("character", charCount);
            range.select();
        }
    }
}

[tbworld]

Nice work, as soon as I have time I am going to check this out in detail. Thank you so much for sharing.

I have been working on a pretty easy model by using the existing vb javascript files "vbulletin_quick_reply.js", "vbulletin_quick_edit.js", ... anyway, you already know the problem with that method -- so many different editor modes to modify. After staring at the code for awhile, I too was thinking that I should just position the data via the DOM and be done with it. Since essentially that is all that is being done in the vb JavaScript files.

Sorry, I missed your first (previous) post somehow. I must have been traveling for work or I would have answered, but it looks like you were a bit ahead of my work. I just finished "quick_reply" and "quick_editor" two days ago and still needed to verify caret positioning among the browsers.

Good work! -- I am impressed.

[MarkFL]

Because of an issue reported to me by one of my fellow administrators, who uses a different OS (I use Windows 7 and he uses Xubuntu and we both use Firefox), I have moved the focus method to the end of the moveCaret function, and this alleviates the need to make two calls to the moveCaret function (which I used previously so that Chrome did not lose the cursor).

So, the updated functions are:

function copyMathToPost()
{
    var content = document.getElementById('MathInput').value, el = document.getElementsByClassName('cke_source')[0];
    if (el)
    {
        var pos = getCaretPosition(el);
        el.value = el.value.substr(0, pos) + content + el.value.substr(pos);
        setCaretPosition(el,pos + content.length);
        el.focus();
    }
    else
    {
        var iFrame = document.getElementsByTagName('iframe')[0];
        insertHtmlAtCursor(iFrame,content);
        moveCaret(iFrame, 0);
    }
}

function insertHtmlAtCursor(iFrame,html)
{
    var sel, range, node;
    html = html.replace(/\r\n?|\n/g, '<br>');
    if (iFrame.contentWindow.getSelection && iFrame.contentWindow.getSelection().getRangeAt)
    {
        sel = iFrame.contentWindow.getSelection();
        try{range = sel.getRangeAt(0);}
        catch (e){alert("This function is not supported by your browser. Please switch editor to Source Mode.");}
        node = range.createContextualFragment(html);
        range.insertNode(node);
        range = range.cloneRange();
        range.collapse();
        sel.removeAllRanges();
        sel.addRange(range);
    }
    else if (iFrame.contentWindow.selection && iFrame.contentWindow.selection.createRange)
    {
        iFrame.contentWindow.selection.createRange().pasteHTML(html);
    }
    else
    {
        alert("This function is not supported by your browser. Please switch editor to Source Mode.");
    }
}

function moveCaret(win, charCount)
{
    var sel, range;
    if (win.contentWindow.getSelection)
    {
        sel = win.contentWindow.getSelection();
        if (sel.rangeCount > 0)
        {
            var textNode = sel.focusNode;
            var newOffset = sel.focusOffset + charCount;
            sel.collapse(textNode, newOffset);
        }
    }
    else if (sel = win.contentDocument.selection)
    {
        if (sel.type != "Control")
        {
            range = sel.createRange();
            range.move("character", charCount);
            range.select();
        }
    }
    win.focus();
}