在contentEditable div中设置光标位置-跨浏览器

Question

I am facing a problem with setting cursor position in a contentEditable div and seek some assistance. 我在contentEditable div中设置光标位置时遇到问题，寻求帮助。

I have already looked at several SO and other online solutions without success, including: jquery Setting cursor position in contenteditable div , and Set cursor position on contentEditable <div> and many other online resources. 我已经看过几种SO和其他在线解决方案，但没有成功，包括： jquery在contenteditable div中设置光标位置，以及在contentEditable <div>和许多其他在线资源上设置光标位置。

Basically, we are using a Telerik Editor with the contentAreaMode set to DIV which forces it to use a contentEditable div instead of an iFrame. 基本上，我们使用的是Telerik编辑器，其contentAreaMode设置为DIV，这迫使它使用contentEditable div代替iFrame。 When a user clicks in the editor, we wish to be able to move the cursor to the click point so the user may enter/edit content wherever they wish in the editor. 当用户单击编辑器时，我们希望能够将光标移动到单击点，以便用户可以在编辑器中的任何位置输入/编辑内容。 Using the example code below, I am able to set the cursor position in FF, Chrome, and IE9 to AFTER the inner div. 使用下面的示例代码，我可以将FF，Chrome和IE9中的光标位置设置为内部div之后。 However, in IE8 (which falls into the else if (document.selection) block), I am unable to get the cursor position to move after the div, so any typed text ends up either before or inside the div - never after. 但是，在IE8中（属于else if（document.selection）块），我无法使光标位置在div之后移动，因此任何键入的文本都在div之前或内部结束-永远不会之后。 I would be GREATLY appreciative of any help. 我将不胜感激任何帮助。

ADDITIONAL INFO: Need this to work in IE8 standards document mode - NOT in Quirks mode (which does work). 其他信息：需要此功能才能在IE8标准文档模式下工作-不在Quirks模式下工作（确实可以）。

UPDATE: Here is a jsfiddle of the issue to play with: http://jsfiddle.net/kidmeke/NcAjm/7/ 更新：这是一个要解决的问题： 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>

Answer 1

Using Rangy (disclosure: I'm the author) works for me in IE 7 and 8 in the window load event. 使用Rangy（公开：我是作者）在window load事件中的IE 7和8中为我工作。 Trying to move the caret when the user clicks on an editable element is a bad idea: it conflicts with default browser behaviour hence may not work, and does not do what he user expects (which is to place the caret at or near where they clicked). 当用户单击可编辑元素时尝试移动插入符号是一个坏主意：它与默认浏览器行为发生冲突，因此可能无法正常工作，并且无法达到用户期望的效果（即将插入符号放置在他们单击的位置或附近））。

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

在contentEditable div中设置光标位置-跨浏览器

问题描述

1 个解决方案

解决方案1
0 2012-03-28 16:13:45

在contentEditable div中设置光标位置-跨浏览器

问题描述

1 个解决方案

解决方案1 0 2012-03-28 16:13:45

解决方案1
0 2012-03-28 16:13:45