个人中心
gpt4 book ai didi

javascript - 计算可编辑 div 内范围(突出显示的文本)的绝对开始和结束位置

转载 作者：行者123 更新时间：2023-11-28 10:21:11 25 4
gpt4 key购买 nike

我正在运行一个实验，看看是否可以返回 contentEditable(实际上对测试并不重要)div 中突出显示的测试 block 的绝对起点和终点。我不是在构建富文本编辑器或任何东西，我只是想知道它是如何完成的!所以我想在右键单击时返回(不重要，我也只是搞乱了它)是两个数字，从包装器 div 的开始到选择的开始的绝对距离以及从包装 div 的开始的绝对距离包装 div 到所选内容的末尾。

我认为 Mootools 会让这一切变得简单，但我只能让它们的实现与表单(即文本区域、输入等)一起使用。所以我用谷歌进行了一次快速的狂欢，当不涉及标签时，一切都工作得很好，例如He|llo Wor|ld(其中竖线 | 代表突出显示的范围)将返回 [2, 9]，这是正确的。然而，当我向 div 添加标签以允许颜色/格式设置时，这些数字没有任何意义，因为范围仅给出相对于文本节点的位置，而不是绝对值。有什么想法如何得到这个吗？我只能想象它涉及某种形式的可怕的 DOM 操作。

JS:

window.addEvent('domready', function()
    {
        document.body.addEvent('contextmenu', 
            function(e)
            {
                e.stop();
            }
        );

        if(!window.SelectionHandler)
        {
            SelectionHandler = {};
        }

        SelectionHandler.Selector = {};

        SelectionHandler.Selector.getSelected = function()
        {
            var userSelection = '';

            if(window.getSelection)
            {
                userSelection = window.getSelection();
            }
            else if(document.getSelection)
            {
                userSelection = document.getSelection();
            }
            else if(document.selection)
            {
                userSelection = document.selection.createRange();
            }

            return userSelection;
        }

        SelectionHandler.Selector.getText = function(userSelection)
        {
            var selectedText = userSelection;

            if(userSelection.text)
            {
                selectedText = userSelection.text;
            }

            return selectedText;
        }

        SelectionHandler.Selector.getRange = function(userSelection)
        {
            if(userSelection.getRangeAt && typeof(userSelection.getRangeAt) != 'undefined')
            {
                var selectedRange = userSelection.getRangeAt(0);
            }
            else
            {
                var selectedRange = document.createRange();
                selectedRange.setStart(userSelection.anchorNode, userSelection.anchorOffset);
                selectedRange.setEnd(userSelection.focusNode, userSelection.focusOffset);
            }

            return selectedRange;
        }

        $('mydiv').addEvent('mousedown', 
            function(event)
            {
                if(event.rightClick)
                {
                    var userSelection   = SelectionHandler.Selector.getSelected();
                    var selectedText    = SelectionHandler.Selector.getText(userSelection);
                    var selectedRange   = SelectionHandler.Selector.getRange(userSelection);

                    // New ranges to add identifiable nodes (must be in that order!?)
                    var endRange = document.createRange();
                    endRange.setStart(selectedRange.endContainer, selectedRange.endOffset);
                    endRange.insertNode(document.createTextNode('!~'));

                    var startRange = document.createRange();
                    startRange.setStart(selectedRange.startContainer, selectedRange.startOffset);
                    startRange.insertNode(document.createTextNode('~!'));

                    // Find the position of our new identifiable nodes (and account for their removal)
                    var div_content = $('mydiv').get('html');
                    var start       = div_content.indexOf('~!');
                    var end         = div_content.indexOf('!~') - 2;

                    // Remove our identifiable nodes (DOESN'T WORK)
                    //startRange.deleteContents();
                    //endRange.deleteContents();

                    // This does work, but obviously loses the selection
                    div_content = div_content.replace('~!', '').replace('!~', '');
                    $('mydiv').set('html', div_content);

                    console.log(start + ' vs ' + end);
                }
            }
        );
    }
);

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Edit Range Test</title>
 </head>

 <script type="text/javascript" src="mootools.js"></script>
 <script type="text/javascript" src="edit_range.js"></script>

 <style>
    #mydiv {
        width: 400px;
        height: 400px;
        border: 1px solid #a2a2a2;
        padding: 5px;
    }
 </style>

 <body>
    <h1>Edit Range Test</h1>

    <div id="mydiv" contentEditable="true"><span style="color: red;">Hello</span> World! <span style="color: red;">Hello</span> World! </div>

 </body>
</html>

因此，当我现在选择 He|llo Wor|ld(其中管道 |，再次代表突出显示的范围)时，当我想要 [28, 42] 时，它将返回 [2, 4]。

编辑:我已经更新了代码以澄清我想要做什么。它完成了我想要测试的大部分内容，但失去了选择并且非常蹩脚!

提前致谢!

最佳答案

首先，你从Range获得的信息对象与您所能获得的一样有用:对于 Range 的每个开始和结束边界，您都会获得一个 DOM 节点和该节点内的偏移量(文本或注释节点内的字符偏移量或其他子节点偏移量)，它完整​​地描述了边界。我认为“绝对起点和终点”的意思是整个可编辑元素内的两个字符偏移量，但这是一个难以捉摸的概念:它看起来很简单，但很难确定。例如，段落分隔符算作多少个字符？一个<br> ？安<a>元素为 display: block ？元素如<script>包含文本但用户不可见的元素？通过 display: none 隐藏的元素？正常文档流之外的元素，例如通过 position: absolute 定位的元素？多个连续的空白字符被浏览器呈现为单个可见字符？

话虽如此，我最近尝试编写代码来执行此操作，是的，它确实涉及 DOM 操作(尽管不是那么可怕)。它非常初级，不能令人满意地处理上述任何问题，部分是因为我很快就提出了一个关于 SO 的问题，部分是因为总的来说，我认为不可能很好地处理所有这些问题问题。以下答案提供了将选择内容保存和恢复为可编辑元素中的字符索引的功能:replace innerHTML in contenteditable div

关于javascript - 计算可编辑 div 内范围(突出显示的文本)的绝对开始和结束位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5608333/

25 4 0
文章推荐： css - 当鼠标悬停在子元素上时，我将如何选择父元素？
文章推荐： html - asp.net连接数据库读取数据
文章推荐： IE中CSS Div定位问题
文章推荐： css - 隐藏 Woocommerce 灯箱图片说明
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com