Question

我的主要问题是将文本插入Ajax控件工具包Html编辑器的光标位置。我已经绞尽脑汁待了几天，最后我终于解决了这个问题。我将设置一些背景来更好地描述我的确切问题。

我在ASP.Net页面中使用HtmlEditor，我试图从DropDownList插入值。我正在使用客户端javascript来触发selectedindexchanged事件。比方说，我在设计面板中有一些文字，如下所示：

123456789
1234[CaretPosition]56789
123456789

现在，我想将变量ddlText准确地插入到插入符号位置。我的代码现在的方式是，它会将值插入正确的水平位置，但似乎忽略了我的选择位于第二行的事实。输出看起来类似于：

1234[ddltext]56789
123456789
123456789

注意我的插入符位置在第二行，但插入的文本出现在第一行。有没有办法让插入函数将文本插入正确的水平和垂直位置？

这是我处理插入事件的脚本。

        <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>

我现在一直在抨击这个要求，我真的可以用一双新眼睛。

Answer 1

根据我的要求，我能够通过网络上的随机网站提供大量帮助，使其正常运行。没有一个网站提供明确的指导，但是从我从几个网站上学到的东西，我能够拼凑出一个在Firefox，Chrome和IE中处理这个功能的功能。在ASP.net页面中使用时，ajax控件工具包HTML编辑器在Opera中是非常错误的，但这超出了我的控制能力。这是我的javascript处理问题的要求。值得注意的是，在IE中，您应该更改触发事件的功能，以便在mousedown而不是click上触发。希望这个功能有助于汇总分散在网络上的有关该主题的所有信息。

    <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>

将文本插入WYSIWYG编辑器问题

1 个答案: