Установка позиции курсора в contentEditable div - кросс-браузер - PullRequest
Новая
       36

Установка позиции курсора в contentEditable div - кросс-браузер

0 голосов
/ 28 марта 2012

У меня проблема с установкой позиции курсора в div contentEditable, и я обращаюсь за помощью.

Я уже безуспешно смотрел на несколько SO и других онлайн-решений, в том числе: jquery Установка позиции курсора в contenteditable div , и Установка позиции курсора на contentEditable

и многих других онлайн-ресурсах.

По сути, мы используем Telerik Editor с contentAreaMode, установленным в DIV, что заставляет его использовать div contentEditable вместо iFrame. Когда пользователь щелкает в редакторе, мы хотим, чтобы курсор мог перемещаться к точке щелчка, чтобы пользователь мог вводить / редактировать контент в любом месте редактора. Используя приведенный ниже пример кода, я могу установить позицию курсора в FF, Chrome и IE9 для ПОСЛЕ внутреннего div. Однако в IE8 (который входит в блок else if (document.selection)) я не могу заставить курсор перемещаться после div, поэтому любой напечатанный текст заканчивается либо до, либо внутри div - никогда после. Я был бы очень признателен за любую помощь.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ: Это необходимо для работы в стандартном режиме документов IE8, а НЕ в режиме Quirks (который работает).

ОБНОВЛЕНИЕ: Вот jsfiddle проблемы, с которой можно поиграть: http://jsfiddle.net/kidmeke/NcAjm/7/

<html>
    <head>
        <style type="text/css">
            #divContent
            {
                border: solid 2px green;
                height: 1000px;
                width: 1000px;
            }
        </style>

        <script type="text/javascript">
        $(document).ready(function()
        {
            $("#divContent").bind('click', function()
            {
                GetCursorPosition();
            });
            $("#divContent").bind('keydown', function()
            {
                GetCursorPosition();
            });
        });

        function GetCursorPosition()
        {
            if (window.getSelection)
            {
                var selObj = window.getSelection();
                var selRange = selObj.getRangeAt(0);
                cursorPos = findNode(selObj.anchorNode.parentNode.childNodes, selObj.anchorNode) + selObj.anchorOffset;
                $('#htmlRadEdit_contentDiv').focus();
                selObj.addRange(selRange);
            }
            else if (document.selection)
            {
                var range = document.selection.createRange();
                var bookmark = range.getBookmark();
                // FIXME the following works wrong when the document is longer than 65535 chars 
                cursorPos = bookmark.charCodeAt(2) - 11; // Undocumented function [3] 
                $('#htmlRadEdit_contentDiv').focus();
                range.moveStart('textedit');
            }
        }
        function findNode(list, node)
        {
            for (var i = 0; i < list.length; i++)
            {
                if (list[i] == node)
                {
                    return i;
                }
            }
            return -1;
        }
        </script>

    </head>
    <body>
        <div id="divContent" contentEditable="true">
            <br>
            <div style="background-color:orange; width: 50%;">
                testing!
            </div>
        </div>
    </body>
</html>

1 Ответ

0 голосов
/ 28 марта 2012

Использование Rangy (раскрытие: я автор) работает для меня в IE 7 и 8 в событии window load. Попытка переместить каретку, когда пользователь нажимает на редактируемый элемент, является плохой идеей: она конфликтует с поведением браузера по умолчанию, следовательно, может не сработать и не будет делать то, что он ожидает от пользователя (то есть разместить каретку в месте, где они щелкнули, или рядом с ним). ). 

<html>
    <head>
        <style type="text/css">
            #divContent
            {
                width: 1000px;
                height: 1000px;
                border: solid 2px green;
                padding: 5px
            }
        </style>
        <script src="http://rangy.googlecode.com/svn/trunk/currentrelease/rangy-core.js"></script>

        <script type="text/javascript">
            window.onload = function() {
                rangy.init();
                var el = document.getElementById("divContent");
                el.focus();
                var range = rangy.createRange();
                range.setStartAfter(el.getElementsByTagName("div")[0]);
                range.collapse(true);
                rangy.getSelection().setSingleRange(range);
            };

        </script>

    </head>
    <body>
        <div id="divContent" contentEditable="true">
            <br>
            <div style="background-color:orange; width: 50%;">
                testing!
            </div>
        </div>
    </body>
</html>
...