1

ここでの主な問題は、Ajax コントロール ツールキットの Html エディターのカーソル位置にテキストを挿入することです。私はこれで数日間頭を悩ませてきましたが、ついに問題を解決する最後の段階に来ました. 正確な問題をよりよく説明するために、少しコンテキストを設定します。

ASP.Net ページ内で HtmlEditor を使用しており、DropDownList から値を挿入しようとしています。クライアント側の JavaScript を使用して、selectedindexchanged イベントを発生させています。たとえば、デザイン パネルに次のようなテキストがあるとします。

123456789
1234[CaretPosition]56789
123456789

ddlTextここで、変数をキャレット位置に正確に挿入したいと思います。私のコードは現在、値を正しい水平位置に挿入しますが、選択が2行目にあるという事実を無視しているようです。出力は次のようになります。

1234[ddltext]56789
123456789
123456789

キャレットの位置が 2 行目にあったのに、挿入されたテキストが最初の行に表示されていることに注目してください。正しい水平および垂直位置にテキストを挿入するための挿入機能を取得する方法はありますか?

挿入イベントを処理するスクリプトは次のとおりです。

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

私はこの 1 つの要件に対して頭を悩ませてきましたが、本当に新鮮な目を使うことができました。

4

1 に答える 1

0

ウェブ上のランダムなウェブサイトから多くの助けを借りて、私の要件に従ってこれを適切に機能させることができました。明確なガイダンスを提供しているサイトはありませんでしたが、いくつかのサイトから学んだことを利用して、Firefox、Chrome、IEでこれを処理する機能を組み合わせることができました。ajaxコントロールツールキットのHTMLエディターは、ASP.netページで使用すると、Opera自体で非常にバグがありますが、それは私のコントロール能力を超えています。これが質問の要件を処理する私のJavaScriptです。IEでは、イベントを発生させる関数を、のmousedown代わりにトリガーするように変更する必要があることに注意してくださいclick。うまくいけば、この関数は、このトピックに関してWeb全体に散らばっているすべての情報を集約するのに役立ちます。

    <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>
于 2012-08-31T15:02:21.030 に答える