Question

My main problem here has to do with inserting text to the cursor position of the Ajax control toolkit Html Editor. I have been racking my brains with this for a few days, and I am finally at the last leg of cracking the problem. I’ll set up a little context to better describe my exact issue.

I use the HtmlEditor within an ASP.Net page, and I am attempting to insert values from a DropDownList. I am using client side javascript to fire the selectedindexchanged event. Let’s say for instance that I have some text in the Design Panel like so:

123456789
1234[CaretPosition]56789
123456789

Now, I want to insert the variable ddlText exactly at the point of the caret position.
The way my code is now, it will insert the value to the correct horizontal position, but it seems to ignore the fact that my selection is on the second line. The output will look similar to this:

1234[ddltext]56789
123456789
123456789

Notice how my caret position was on the second line, but the inserted text appears on the first line. Is there any way to get the insert function to insert the text to the correct horizontal AND vertical position?

Here is my script that handles the insert event.

        <script type="text/javascript">

            $(document).ready(function () {
                $('#<%=ddlFields.ClientID%>').change(function () {
                    var ddltext = $('#<%=ddlFields.ClientID%> option:selected').text();
                    insertText(ddltext)
                });
            });

            function insertText(text) {
                var editorField = document.getElementById('MainContent_Editor1_ctl02_ctl00').contentWindow.document.body.innerHTML;
                var range = document.getElementById('MainContent_Editor1_ctl02_ctl00').contentWindow.getSelection().getRangeAt(0);
                var selStart = range.startOffset;
                var selEnd = range.endOffset;
                var innerText = editorField.substring(0, selStart) + text + editorField.substring(selEnd, editorField.length);
                document.getElementById('MainContent_Editor1_ctl02_ctl00').contentWindow.document.body.innerHTML = innerText;                                           
            }
    </script>

I’ve been bashing my head against this one requirement for a bit now, and I could really use a fresh pair of eyes on it.

Answer 1

I was able to get this working properly as per my requirements with a lot of help from random websites around the web. No one site offered clear guidance, but taking what I learned from several, I was able to piece together a function that handled this in Firefox, Chrome, and IE. The ajax control toolkit HTML editor is very buggy on it’s own in Opera when used in an ASP.net page, but that is beyond my ability to control. Here is my javascript that handles the requirement of the question. It is worth noting that in IE, you should change the function that fires the event to trigger on a mousedown instead of a click. Hopefully this function helps aggregate all of the information that is scattered around the web concerning this topic.

    <script type="text/javascript">

        $(document).ready(function () {
            var isMSIE = /*@cc_on!@*/false;
            if (isMSIE == false) {
                $('#<%=btnAddField.ClientID%>').click(function (event) {
                    event.preventDefault();
                    insertText($('#<%=ddlFields.ClientID%> option:selected').val())
                    return false;
                });
            }
            if (isMSIE == true) {
                $('#<%=btnAddField.ClientID%>').mousedown(function (event) {
                    event.preventDefault();
                    insertText($('#<%=ddlFields.ClientID%> option:selected').val())
                    return false;
                });
            }
        });

        function insertText(text) {

            var sel, range;
            if (window.getSelection) {
                sel = document.getElementById('YourIFramesClientIDGoesHere').contentWindow.getSelection();
                var isMSIE = /*@cc_on!@*/false;

                if (sel.rangeCount && isMSIE == false) {

                    range = sel.getRangeAt(0);
                    range.deleteContents();
                    textNode = document.createTextNode(text);
                    range.insertNode(textNode);

                    range.setStart(textNode, textNode.length);
                    range.setEnd(textNode, textNode.length);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
            if (sel.rangeCount && isMSIE == true) {

                range = document.selection.createRange();
                range.pasteHTML(text);

            }

        }
    </script>