本申请涉及一种添加页面批注的处理方法和装置，其中，该方法包括：在检测到用户在页面中选择文本时，获取所选择的文本在所述页面中的位置信息；在所述页面中弹出批注提示浮层；若所述用户确认为所述所选择的文本添加批注，则弹出批注内容输入框；获取用户在所述批注内容输入框中输入的批注数据；将所述所选择的文本在所述页面中的位置信息以及所述批注数据对应存储在后端服务器中。通过本申请，解决了相关技术中添加页面批注后端需要保存整个页面的HTML文本导致请求时间长、加载速度慢的问题，实现了缩短请求时间、加快加载缩短的技术效果。效果。效果。
【技术实现步骤摘要】
添加页面批注的处理方法和装置
[0001]本申请涉及计算机
，特别是涉及添加页面批注的处理方法、装置、计算机设备和计算机可读存储介质。
技术介绍
[0002]目前现有的添加页面批注的技术，例如WIKI、Notion、石墨文档等产品都是通过如下过程所示的方案实现的，具体包括：
[0003]1.用户选中一段文本后，弹出一个浮层，提示用户是否执行添加批注功能。
[0004]2.当用户点击添加批注功能，将对应的文本用一个新的包含自定义批注类名的HTML Element(这里大多数会用span Element)包裹住，并弹出一个批注输入弹框，用户完成输入并提交后，将整段富文本传递后端保存于数据库中。
[0005]3.用户再次或刷新打开页面，会从后端拉取包含批注Element的富文本内容，并对有批注类名的HTML Element应用一个被选中的样式并添加一个click事件，点击该HTML Element打开对应的批注内容弹框。
[0006]4.用户可以点击批注内容弹框的删除按钮删除批注内容，同时会将对应的HTML批注Element删除，点击保存将该段富文本传递后端保存。
[0007]上述方案存在以下缺陷：
[0008]1.通用性太低，现有技术的批注数据与状态的存储必须是HTML文本，这导致该技术必须在富文本编辑的场景下使用(例如一些在线编辑文档的网站)。而当前的页面大多是组件化富应用开发(例如管理后台，表单的输入)，在这些场景下是无法使用该技术的。
[0009]2.数据体积太大，保存给后端数据都是当前整个页面的HTML文本，所以数据体积非常大，这会导致请求时间长，加载速度慢。
[0010]3.数据耦合性太高，由于需要整体当成HTML文本，批注的数据也会混合其中，数据没有隔离。
[0011]目前针对相关技术中添加页面批注后端需要保存整个页面的HTML文本导致请求时间长、加载速度慢的问题，尚未提出有效的解决方案。
技术实现思路
[0012]本申请实施例提供了一种添加页面批注的处理方法、装置、计算机设备和计算机可读存储介质，以至少解决相关技术中添加页面批注后端需要保存整个页面的HTML文本导致请求时间长、加载速度慢的问题。
[0013]第一方面，本申请实施例提供了一种添加页面批注的处理方法，包括：
[0014]在检测到用户在页面中选择文本时，获取所选择的文本在所述页面中的位置信息；
[0015]在所述页面中弹出批注提示浮层；
[0016]若所述用户确认为所述所选择的文本添加批注，则弹出批注内容输入框；
[0017]获取用户在所述批注内容输入框中输入的批注数据；
[0018]将所述所选择的文本在所述页面中的位置信息以及所述批注数据对应存储在后端服务器中。
[0019]在其中一些实施例中，在检测到用户在页面中选择文本时，在获取所选择的文本在所述页面中的位置信息之前，所述方法还包括；
[0020]获取所述所选择的文本以及所述所选择的文本对应的父节点；
[0021]根据所述所选择的文本对应的父节点查找是否存在具有批注容器属性的节点，其中，所述批注容器属性用于指示允许对所述所选择的文本添加批注；
[0022]若存在具有批注容器属性的节点，则执行所述获取所选择的文本在所述页面中的位置信息的步骤。
[0023]在其中一些实施例中，在检测到用户在页面中选择文本时，获取所选择的文本在所述页面中的位置信息包括；
[0024]获取所述具有批注容器属性的节点到所述所选择的文本所在的节点的CSS选择器的路径；
[0025]获取所述所选择的文本在所述所选择的文本对应的父节点中的位置；
[0026]其中，所述具有批注容器属性的节点到所述所选择的文本所在的节点的CSS选择器的路径与所述所选择的文本在所述所选择的文本对应的父节点中的位置一起唯一指示所述所选择的文本在所述页面中的位置信息。
[0027]在其中一些实施例中，在检测到用户在页面中选择文本时，获取所选择的文本在所述页面中的位置信息包括；
[0028]获取批注容器属性值；
[0029]获取所述具有批注容器属性的节点到所述所选择的文本所在的节点的CSS选择器的路径；
[0030]获取所述所选择的文本在所述所选择的文本对应的父节点中的位置；
[0031]其中，所述批注容器属性值、所述具有批注容器属性的节点到所述所选择的文本所在的节点的CSS选择器的路径与所述所选择的文本在所述所选择的文本对应的父节点中的位置一起唯一指示所述所选择的文本在所述页面中的位置信息。
[0032]在其中一些实施例中，在将所述所选择的文本在所述页面中的位置信息以及所述批注数据对应存储在后端服务器中之后，所述方法还包括；
[0033]向所述后端服务器请求所述所选择的文本在所述页面中的位置信息，并基于所述所选择的文本在所述页面中的位置信息定位所述所选择的文本所在的节点；
[0034]为所述所选择的文本所在的节点绑定点击事件；
[0035]在检测到触发所述点击事件时，则执行所述弹出批注内容输入框的步骤。
[0036]在其中一些实施例中，在弹出批注内容输入框之后，所述方法还包括；
[0037]判断所述所选择的文本所在的节点是否有对应的批注数据；
[0038]若所述所选择的文本所在的节点有对应的批注数据，在检测到所述用户触发批注删除请求时，则删除所述所选择的文本所在的节点绑定的点击事件，并删除所述所选择的文本所在的节点对应的批注数据；在检测到所述用户触发批注保存请求时，则执行获取用户在所述批注内容输入框中输入的批注数据、将所述所选择的文本在所述页面中的位置信
息以及所述批注数据对应存储在后端服务器中的步骤。
[0039]第二方面，本申请实施例提供了一种添加页面批注的处理装置，包括：
[0040]第一获取单元，用于在检测到用户在页面中选择文本时，获取所选择的文本在所述页面中的位置信息；
[0041]第一弹出单元，用于在所述页面中弹出批注提示浮层；
[0042]第二弹出单元，用于若所述用户确认为所述所选择的文本添加批注，则弹出批注内容输入框；
[0043]第二获取单元，用于获取用户在所述批注内容输入框中输入的批注数据；
[0044]存储单元，用于将所述所选择的文本在所述页面中的位置信息以及所述批注数据对应存储在后端服务器中。
[0045]在其中一些实施例中，所述装置还包括；
[0046]第三获取单元，用于在检测到用户在页面中选择文本时，在获取所选择的文本在所述页面中的位置信息之前，获取所述所选择的文本以及所述所选择的文本对应的父节点；
[0047]查找单元，用于根据所述所选择的文本对应的父节点查找是否存在具有批注容器属性的节点，其中，所述批注容器属性用于指示允许对所述所选择的文本添加批注；
[0048]第本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种添加页面批注的处理方法，其特征在于，包括：在检测到用户在页面中选择文本时，获取所选择的文本在所述页面中的位置信息；在所述页面中弹出批注提示浮层；若所述用户确认为所述所选择的文本添加批注，则弹出批注内容输入框；获取用户在所述批注内容输入框中输入的批注数据；将所述所选择的文本在所述页面中的位置信息以及所述批注数据对应存储在后端服务器中。2.根据权利要求1所述的添加页面批注的处理方法，其特征在于，在检测到用户在页面中选择文本时，在获取所选择的文本在所述页面中的位置信息之前，所述方法还包括；获取所述所选择的文本以及所述所选择的文本对应的父节点；根据所述所选择的文本对应的父节点查找是否存在具有批注容器属性的节点，其中，所述批注容器属性用于指示允许对所述所选择的文本添加批注；若存在具有批注容器属性的节点，则执行所述获取所选择的文本在所述页面中的位置信息的步骤。3.根据权利要求2所述的添加页面批注的处理方法，其特征在于，在检测到用户在页面中选择文本时，获取所选择的文本在所述页面中的位置信息包括；获取所述具有批注容器属性的节点到所述所选择的文本所在的节点的CSS选择器的路径；获取所述所选择的文本在所述所选择的文本对应的父节点中的位置；其中，所述具有批注容器属性的节点到所述所选择的文本所在的节点的CSS选择器的路径与所述所选择的文本在所述所选择的文本对应的父节点中的位置一起唯一指示所述所选择的文本在所述页面中的位置信息。4.根据权利要求2所述的添加页面批注的处理方法，其特征在于，在检测到用户在页面中选择文本时，获取所选择的文本在所述页面中的位置信息包括；获取批注容器属性值；获取所述具有批注容器属性的节点到所述所选择的文本所在的节点的CSS选择器的路径；获取所述所选择的文本在所述所选择的文本对应的父节点中的位置；其中，所述批注容器属性值、所述具有批注容器属性的节点到所述所选择的文本所在的节点的CSS选择器的路径与所述所选择的文本在所述所选择的文本对应的父节点中的位置一起唯一指示所述所选择的文本在所述页面中的位置信息。5.根据权利要求1所述的添加页面批注的处理方法，其特征在于，在将所述所选择的文本在所述页面中的位置信息以及所述批注数据对应存储在后端服务器中之后，所述方法还包括；向所述后端服务器请求所述所选择的文本在所述页面中的位置信息，...
【专利技术属性】
技术研发人员：陶旭生，
申请(专利权)人：上海妙一生物科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。