HTML/JavaScript：如何在特殊 div

编程问答 2022-05-27

问题描述

我目前正在 Django 中开展一个更大的项目，但在 JavaScript 方面遇到了相当大的困难，因为我刚刚开始使用它...

分解/简化问题：

在特殊的 div（例如 "main-content"）中将包含一些格式化的 HTML，用户可以在其中选择一些文本并按下按钮。按钮按下后选择的开始和结束位置（相对于div，忽略div里面的HTML标签，这样开始/结束位置在插入 HTML 标签）将与一些附加信息一起发送到服务器，存储在数据库中，然后将通过 websocket 发送到不同的地方，这些信息将用于在周围添加 <span ...>...</span>开始/结束位置（基于相同的 HTML）。

第一个问题：到目前为止，我已经能够计算出选择的相对开始/结束位置，但我不知道如何在通过 websocket 发送后重新创建选择 - 甚至可能吗？ 我一直在寻找 JavaScript 或 jQuery 解决方案，但没有找到任何对我有用的东西。

第二个问题：我希望用户只能在这个特殊的 div（“主要内容”）中进行选择，或者检查选择的开始或结束位置是否在 div 之外。有人知道这样做的简单方法吗？

示例

HTML（摘录）：

...
<div id="controls">
    <h2>Controls</h2>
    some text...
    <input type="button" onclick="alertSelection()" unselectable="on" value="make selection">
</div>
<div id="main-content">
    <h1>Lorem <b>ipsum</b> dolor sit amet consectetuer adipiscing elit</h1>
    <p>
        Lorem ipsum <i>dolor</i> sit amet,consectetuer adipiscing elit.
        Aenean commodo ligula eget dolor. Aenean massa <strong>strong</strong>.
        Lorem ipsum dolor sit amet...
        ...
    </p>
</div>
...

JavaScript（摘录）：

function getSelectionCharOffsetsWithin(element) {
    var start = 0,end = 0;
    var sel,range,priorRange;
    if (typeof window.getSelection != "undefined") {
        range = window.getSelection().getRangeAt(0);
        priorRange = range.cloneRange();
        priorRange.selectNodeContents(element);
        priorRange.setEnd(range.startContainer,range.startOffset);
        start = priorRange.toString().length - 1;
        end = start + range.toString().length;
    }
    return {
        start: start,end: end
    };
}

function alertSelection() {
    var mainDiv = document.getElementById("main-content");
    var sel = getSelectionCharOffsetsWithin(mainDiv);
    
    ... sendig to backend stuff ...
}

现在，如果用户做出选择，例如“Lorem ipsum do”直接在div的开头（有效包含<h1>Lorem <b>ipsum</b> do）并按下按钮alertSelection()发送开始位置0和结束位置{{ 1}}（以及一些其他信息）到服务器。

除了检查选择边界是否在 14 之外（想法？）之外，这已经有效了。

还需要做什么：

服务器通过 websocket 发送以下信息（已经工作）：

  • 起始位置：0
  • 结束位置：14
  • 风格：...
  • 附加信息：...

使用此数据，应在位置 "main-content" 周围添加 <span style="..."> 标记，因此最终结果如下所示：

0:14

我使用这种方法是否走在正确的轨道上，或者这是不可能的，或者有人有更简单的解决方案吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

domhtmljavascriptjqueryselection