Question

我遇到了在contentEditable div中设置光标位置并寻求帮助的问题。

我已经看过几个SO和其他在线解决方案但没有成功，包括： jquery Setting cursor position in contenteditable div，和 Set cursor position on contentEditable <div>以及许多其他在线资源。

基本上，我们使用Telerik编辑器，将contentAreaMode设置为DIV，强制它使用contentEditable div而不是iFrame。当用户点击编辑器时，我们希望能够将光标移动到点击点，以便用户可以在编辑器中的任何地方输入/编辑内容。使用下面的示例代码，我可以将FF，Chrome和IE9中的光标位置设置为内部div之后。但是，在IE8中（属于else if（document.selection）块），我无法让光标位置在div之后移动，因此任何类型的文本都会在div之前或之内结束 - 永远不会在之后。我非常感谢任何帮助。

附加信息：需要在IE8标准文档模式下工作 - 不在Quirks模式下（可行）。

更新：这是一个可以解决的问题：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

使用Rangy（披露：我是作者）在window load事件的IE 7和8中为我工作。当用户点击可编辑元素时尝试移动插入符是一个坏主意：它与默认浏览器行为冲突因此可能无法工作，并且不执行用户期望的操作（将插入符号放在他们单击的位置或附近）。

<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 个答案: