CN110377888B - 一种基于html的稿件审核编辑器的实时留痕标注方法及装置 - Google Patents

Abstract

本发明公开了一种基于HTML的稿件审核编辑器的实时留痕标注方法及装置，该方法包括：初始化编辑器，预先设置标注样式规则；监听用户的鼠标键盘事件，判断事件操作类型；根据不同事件操作类型，分别判断是否存在选区；对删除功能操作，若存在根据当前光标插入点标签字体的类型对选区内文字进行相应的实时留痕标注；否则直接进行相应的实时留痕标注；对新增功能操作直接进行相应的实时留痕标注。

Description

一种基于HTML的稿件审核编辑器的实时留痕标注方法及装置

技术领域

本公开属于实时留痕标注审稿的技术领域，涉及一种基于HTML的稿件审核编辑器的实时留痕标注方法及装置。

背景技术

本部分的陈述仅仅是提供了与本公开相关的背景技术信息，不必然构成在先技术。

留痕标注审稿是C/S架构的客户端采编系统的其中一项功能。然而，发明人在研发过程中发现，在媒体融合的大趋势下，传统的C/S架构的客户端采编系统存在需要安装软件，系统较为封闭，不支持实时更新，难以进行调试等弊端。传统的在线稿件审核往往是利用浏览器插件等形式对Word文档进行在线调用和操作，响应速度慢，稳定性和兼容性较差，更重要的是用户修改的只是文档里的内容，并不是文字本身。文字是依附存储于Word文档当中的，无法直接调用文档里的内容进行网络交互请求，这就带来了不好的用户体验。基于HTML的网页编辑框，可以直接输入和删除文字，但是没有对文字的标注留痕功能。

发明内容

针对现有技术的不足，本公开的一个或多个实施例提供了一种基于HTML的稿件审核编辑器的实时留痕标注方法及装置，通过监听鼠标和键盘的响应事件，对用户鼠标键盘事件进行判断分析和交互操作，对不同的情况采取定制化的解决方案。

根据本公开的一个或多个实施例的一个方面，提供一种基于HTML的稿件审核编辑器的实时留痕标注方法。

一种基于HTML的稿件审核编辑器的实时留痕标注方法，该方法包括：

初始化编辑器，预先设置标注样式规则；

监听用户的鼠标键盘事件，判断事件操作类型；

根据不同事件操作类型，分别判断是否存在选区；

对删除功能操作，若存在根据当前光标插入点标签字体的类型对选区内文字进行相应的实时留痕标注；否则直接进行相应的实时留痕标注；对新增功能操作直接进行相应的实时留痕标注。

进一步地，在该方法中，所述事件操作类型包括删除功能操作和新增功能操作；

所述监听用户的鼠标键盘事件为监听用户的鼠标键盘事件是否包含删除功能操作或者新增功能操作，若是，判断事件操作类型，否则，结束。

进一步地，在该方法中，当判断出的事件操作类型为删除功能操作时，判断是否存在选区；

若存在选区，监听鼠标弹起的响应事件，获取选区开始位置、选区结束位置和光标插入点所在文字节点的文字内容，并判断当前光标插入点标签字体类型，根据当前光标插入点标签字体的类型对选区内文字进行相应的实时留痕标注；

否则，获取光标插入点位置和光标插入点所在文字节点的文字内容，并判断当前光标插入点标签字体类型，根据当前光标插入点标签字体的类型对选区内文字进行相应的实时留痕标注。

进一步地，在该方法中，当判断出的事件操作类型为删除功能操作时，所述根据当前光标插入点标签字体的类型对选区内文字进行相应的实时留痕标注的具体步骤为：

当标签字体为新增加标注的标签字体时，则为新增内容，执行默认系统操作，直接删除内容。

当标签字体为删除标注的标签字体时，则为删除标注内容，执行恢复文字颜色为黑色。

当标签字体为空时，则为正常内容，执行设置文字颜色为红色。

进一步地，在该方法中，当判断出的事件操作类型为新增功能操作时，判断是否存在选区；

若存在选区，监听鼠标弹起的响应事件，获取选区开始位置、选区结束位置和光标插入点所在文字节点的文字内容，对选区内文字进行相应的实时留痕标注；

否则，对文字进行相应的实时留痕标注。

进一步地，在该方法中，当判断出的事件操作类型为新增功能操作时，所述对选区内文字进行相应的实时留痕标注为对选区内文字设置标签字体为删除标注的标签字体并设置颜色为红色，对新增文字再执行设置标签字体为新增加标注的标签字体；

所述文字进行相应的实时留痕标注为设置标签字体为新增加标注的标签字体。

根据本公开的一个或多个实施例的一个方面，提供一种计算机可读存储介质。

一种计算机可读存储介质，其中存储有多条指令，所述指令适于由终端设备的处理器加载并执行所述的一种基于HTML的稿件审核编辑器的实时留痕标注方法。

根据本公开的一个或多个实施例的一个方面，提供一种终端设备。

一种终端设备，其包括处理器和计算机可读存储介质，处理器用于实现各指令；计算机可读存储介质用于存储多条指令，所述指令适于由处理器加载并执行所述的一种基于HTML的稿件审核编辑器的实时留痕标注方法。

根据本公开的一个或多个实施例的一个方面，提供一种基于HTML的稿件审核编辑器的实时留痕标注装置。

一种基于HTML的稿件审核编辑器的实时留痕标注装置，基于所述的一种基于HTML的稿件审核编辑器的实时留痕标注方法，包括：

初始化模块，被配置为初始化编辑器，预先设置标注样式规则；

事件监听模块，被配置为监听用户的鼠标键盘事件，判断事件操作类型；

实时留痕标注模块，被配置为根据不同事件操作类型，分别判断是否存在选区；对删除功能操作，若存在根据当前光标插入点标签字体的类型对选区内文字进行相应的实时留痕标注；否则直接进行相应的实时留痕标注；对新增功能操作直接进行相应的实时留痕标注。

本公开的有益效果：

本公开提供的一种基于HTML的稿件审核编辑器的实时留痕标注方法及装置，使用原生的JavaScrip语言的脚本命令解决处理痕迹标注的问题，适用于任何基于HTML的编辑器，在B/S架构的系统中无需进行额外的配置可以直接使用。

附图说明

构成本申请的一部分的说明书附图用来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。

图1是根据一个或多个实施例的一种基于HTML的稿件审核编辑器的实时留痕标注方法流程图。

具体实施方式：

下面将结合本公开的一个或多个实施例中的附图，对本公开的一个或多个实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本公开的一个或多个实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

应该指出，以下详细说明都是例示性的，旨在对本申请提供进一步的说明。除非另有指明，本实施例使用的所有技术和科学术语具有与本申请所属技术领域的普通技术人员通常理解的相同含义。

需要注意的是，这里所使用的术语仅是为了描述具体实施方式，而非意图限制根据本申请的示例性实施方式。如在这里所使用的，除非上下文另外明确指出，否则单数形式也意图包括复数形式，此外，还应当理解的是，当在本说明书中使用术语“包含”和/或“包括”时，其指明存在特征、步骤、操作、器件、组件和/或它们的组合。

需要注意的是，附图中的流程图和框图示出了根据本公开的各种实施例的方法和系统的可能实现的体系架构、功能和操作。应当注意，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，所述模块、程序段、或代码的一部分可以包括一个或多个用于实现各个实施例中所规定的逻辑功能的可执行指令。也应当注意，在有些作为备选的实现中，方框中所标注的功能也可以按照不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，或者它们有时也可以按照相反的顺序执行，这取决于所涉及的功能。同样应当注意的是，流程图和/或框图中的每个方框、以及流程图和/或框图中的方框的组合，可以使用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以使用专用硬件与计算机指令的组合来实现。

在不冲突的情况下，本公开中的实施例及实施例中的特征可以相互组合，下面结合附图与实施例对本公开作进一步说明。

实施例一

根据本公开的一个或多个实施例的一个方面，提供一种基于HTML的稿件审核编辑器的实时留痕标注方法。

如图1所示，一种基于HTML的稿件审核编辑器的实时留痕标注方法，该方法包括：

一种基于HTML的稿件审核编辑器的实时留痕标注方法，该方法包括：

S1：初始化编辑器，预先设置标注样式规则；

S2：监听用户的鼠标键盘事件，判断事件操作类型；

S3：根据不同事件操作类型，分别判断是否存在选区；

S4：对删除功能操作，若存在根据当前光标插入点标签字体的类型对选区内文字进行相应的实时留痕标注；否则直接进行相应的实时留痕标注；对新增功能操作直接进行相应的实时留痕标注。

在本实施例中，通过监听鼠标和键盘的响应事件，并配合执行原生JavaScript语言的脚本命令来实现这些标注功能，把重点放在用户鼠标键盘事件的判断分析和交互操作上，对不同的情况采取定制化的解决方案。

在本实施例中，接收预设的约定要求，所述约定要求为用户在审稿操作时，原始稿件内容的文字默认为黑色。用户新增加的文字为蓝色。用户删除原始稿件内容的文字为红色。用户删除新增文字，即蓝色文字时，蓝色内容被删除；用户再次删除原始稿件内容，即红色文字时，红色文字恢复为黑色。

设置font＝ins为新增加标注的标签字体；设置font＝del为删除标注的标签字体；设置font＝normal为恢复删除标注的标签字体。

在本实施例的步骤S2中，所述事件操作类型包括删除功能操作和新增功能操作；

所述监听用户的鼠标键盘事件为监听用户的鼠标键盘事件是否包含删除功能操作或者新增功能操作，若是，判断事件操作类型，否则，结束。

在本实施例中，通过keydown监听键盘按下的响应事件，通过keyCode判断用户按键的类型。如果是删除操作，包括删除键、Ctrl+X剪切；执行步骤S301。如果是新增操作，新增包括键盘键入Ctrl+V粘贴；执行步骤S302。

在本实施例的步骤S3中，根据不同事件操作类型，分别判断是否存在选区的具体步骤包括

步骤S301：当判断出的事件操作类型为删除功能操作时，

通过getSelection().isCollapsed判断是否有选区，即是否有选中文字。

如果有选区，通过mouseup监听鼠标弹起的响应事件。

通过getSelection().anchorOffset获取选区开始的位置。

通过getSelection().extentOffset获取选区结束的位置。

通过getSelection().focusNode.data获取光标插入点所在文字节点的文字内容，为选中前的文本内容。通过以上三个参数值计算出选中文字的内容。进入步骤S401。

步骤302：当判断出的事件操作类型为新增功能操作时，

通过getSelection().isCollapsed判断是否有选区，即是否有选中文字。

如果有选区，通过mouseup监听鼠标弹起的响应事件。

通过getSelection().anchorOffset获取选区开始的位置。

通过getSelection().extentOffset获取选区结束的位置。

通过getSelection().focusNode.data获取光标插入点所在文字节点的文字内容，为选中前的文本内容。

通过以上三个参数值计算出选中文字的内容。进入步骤S402。

在实施例的步骤S4中，

步骤S401：当判断出的事件操作类型为删除功能操作时，判断是否存在选区；

若存在选区，监听鼠标弹起的响应事件，获取选区开始位置、选区结束位置和光标插入点所在文字节点的文字内容，并判断当前光标插入点标签字体类型，根据当前光标插入点标签字体的类型对选区内文字进行相应的实时留痕标注；

否则，获取光标插入点位置和光标插入点所在文字节点的文字内容，并判断当前光标插入点标签字体类型，根据当前光标插入点标签字体的类型对选区内文字进行相应的实时留痕标注。

进一步地，在该方法中，当判断出的事件操作类型为删除功能操作时，所述根据当前光标插入点标签字体的类型对选区内文字进行相应的实时留痕标注的具体步骤为：

当标签字体为新增加标注的标签字体时，则为新增内容，执行默认系统操作，直接删除内容。

当标签字体为删除标注的标签字体时，则为删除标注内容，执行恢复文字颜色为黑色。

当标签字体为空时，则为正常内容，执行设置文字颜色为红色。

步骤S4011：当用户键入Backspace删除键，或者Ctrl+X组合键的时候，

如果有选中文字，通过getSelection().focusNode判断当前光标插入点标签字体的类型

情况如下：

如果标签字体为ins，则为新增内容，执行默认系统操作，直接删除内容。

如果标签字体为del，则为删除标注内容，执行execCommand的fontName设置操作，设置为font＝normal,恢复文字颜色为黑色。

如果标签字体为空，则为正常内容，执行execCommand的fontName设置操作，设置为font＝del,设置文字颜色为红色。

如果没有选中文字，则为单个字删除。直接执行步骤S4012。

步骤S4012：

通过getSelection().anchorOffset获取光标插入点的位置

通过getSelection().focusNode.data获取光标插入点所在文字节点的文字内容，为删除前的文本内容。

通过光标插入点的位置和删除前文本内容计算出单个字删除的内容

getSelection().focusNode判断当前光标插入点标签字体的类型

如果标签字体为ins，则为新增内容，执行默认系统操作，直接删除内容。

如果标签字体为del，则为删除标注内容，执行execCommand的fontName设置操作，设置为font＝normal,恢复文字颜色为黑色。

如果标签字体为空，则为正常内容，执行execCommand的fontName设置操作，设置为font＝del,设置文字颜色为红色。

在本实施例的步骤S4中，

步骤S402：当判断出的事件操作类型为新增功能操作时，判断是否存在选区；

若存在选区，监听鼠标弹起的响应事件，获取选区开始位置、选区结束位置和光标插入点所在文字节点的文字内容，对选区内文字进行相应的实时留痕标注；

否则，对文字进行相应的实时留痕标注。

进一步地，在该方法中，当判断出的事件操作类型为新增功能操作时，所述对选区内文字进行相应的实时留痕标注为对选区内文字设置标签字体为删除标注的标签字体并设置颜色为红色，对新增文字再执行设置标签字体为新增加标注的标签字体；

所述文字进行相应的实时留痕标注为设置标签字体为新增加标注的标签字体。

当用户键入有效字符或者Ctrl+V粘贴组合键的时候，即非操作功能键的时候，通过getSelection().isCollapsed判断是否有选区，即是否有选中文字。

如果没有选中文字，执行execCommand的fontName设置操作，设置为font＝ins。

如果有选中文字，对步骤(103)中计算出的文字的内容，然后执行execCommand的fontName设置操作，设置为font＝del,设置文字颜色为红色

再执行执行execCommand的fontName设置操作，设置为font＝ins。

最后将将设置好样式的文字输出到编辑器当中。

实施例二

根据本公开的一个或多个实施例的一个方面，提供一种计算机可读存储介质。

一种计算机可读存储介质，其中存储有多条指令，所述指令适于由终端设备的处理器加载并执行所述的一种基于HTML的稿件审核编辑器的实时留痕标注方法。

实施例三

根据本公开的一个或多个实施例的一个方面，提供一种终端设备。

一种终端设备，其包括处理器和计算机可读存储介质，处理器用于实现各指令；计算机可读存储介质用于存储多条指令，所述指令适于由处理器加载并执行所述的一种基于HTML的稿件审核编辑器的实时留痕标注方法。

这些计算机可执行指令在设备中运行时使得该设备执行根据本公开中的各个实施例所描述的方法或过程。

在本实施例中，计算机程序产品可以包括计算机可读存储介质，其上载有用于执行本公开的各个方面的计算机可读程序指令。计算机可读存储介质可以是可以保持和存储由指令执行设备使用的指令的有形设备。计算机可读存储介质例如可以是――但不限于――电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、静态随机存取存储器(SRAM)、便携式压缩盘只读存储器(CD-ROM)、数字多功能盘(DVD)、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构、以及上述的任意合适的组合。这里所使用的计算机可读存储介质不被解释为瞬时信号本身，诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波(例如，通过光纤电缆的光脉冲)、或者通过电线传输的电信号。

本文所描述的计算机可读程序指令可以从计算机可读存储介质下载到各个计算/处理设备，或者通过网络、例如因特网、局域网、广域网和/或无线网下载到外部计算机或外部存储设备。网络可以包括铜传输电缆、光纤传输、无线传输、路由器、防火墙、交换机、网关计算机和/或边缘服务器。每个计算/处理设备中的网络适配卡或者网络接口从网络接收计算机可读程序指令，并转发该计算机可读程序指令，以供存储在各个计算/处理设备中的计算机可读存储介质中。

用于执行本公开内容操作的计算机程序指令可以是汇编指令、指令集架构(ISA)指令、机器指令、机器相关指令、微代码、固件指令、状态设置数据、或者以一种或多种编程语言的任意组合编写的源代码或目标代码，所述编程语言包括面向对象的编程语言—诸如C++等，以及常规的过程式编程语言—诸如“C”语言或类似的编程语言。计算机可读程序指令可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络—包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。在一些实施例中，通过利用计算机可读程序指令的状态信息来个性化定制电子电路，例如可编程逻辑电路、现场可编程门阵列(FPGA)或可编程逻辑阵列(PLA)，该电子电路可以执行计算机可读程序指令，从而实现本公开内容的各个方面。

实施例四

根据本公开的一个或多个实施例的一个方面，提供一种基于HTML的稿件审核编辑器的实时留痕标注装置。

一种基于HTML的稿件审核编辑器的实时留痕标注装置，基于所述的一种基于HTML的稿件审核编辑器的实时留痕标注方法，包括：

初始化模块，被配置为初始化编辑器，预先设置标注样式规则；

事件监听模块，被配置为监听用户的鼠标键盘事件，判断事件操作类型；

实时留痕标注模块，被配置为根据不同事件操作类型，分别判断是否存在选区；对删除功能操作，若存在根据当前光标插入点标签字体的类型对选区内文字进行相应的实时留痕标注；否则直接进行相应的实时留痕标注；对新增功能操作直接进行相应的实时留痕标注。

在本实施例中，还包括输出模块：将设置好样式的文字输出到编辑器当中。

应当注意，尽管在上文的详细描述中提及了设备的若干模块或子模块，但是这种划分仅仅是示例性而非强制性的。实际上，根据本公开的实施例，上文描述的两个或更多模块的特征和功能可以在一个模块中具体化。反之，上文描述的一个模块的特征和功能可以进一步划分为由多个模块来具体化。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (9)

1.一种基于HTML的稿件审核编辑器的实时留痕标注方法，其特征在于，该方法包括：

初始化编辑器，预先设置标注样式规则；

所述预先设置标注样式规则为用户在审稿操作时，原始稿件内容的文字默认为黑色；用户新增加的文字为蓝色；用户删除原始稿件内容的文字为红色；用户删除新增文字，即蓝色文字时，蓝色内容被删除；用户再次删除原始稿件内容，即红色文字时，红色文字恢复为黑色；

监听用户的鼠标键盘事件，判断事件操作类型；

根据不同事件操作类型，分别判断是否存在选区；

对删除功能操作，若存在根据当前光标插入点标签字体的类型对选区内文字进行相应的实时留痕标注；否则直接进行相应的实时留痕标注；对新增功能操作直接进行相应的实时留痕标注；

当判断出的事件操作类型为删除功能操作时，判断是否存在选区；

若存在选区，监听鼠标弹起的响应事件，获取选区开始位置、选区结束位置和光标插入点所在文字节点的文字内容，并判断当前光标插入点标签字体类型，根据当前光标插入点标签字体的类型对选区内文字进行相应的实时留痕标注；

否则，获取光标插入点位置和光标插入点所在文字节点的文字内容，并判断当前光标插入点标签字体类型，根据当前光标插入点标签字体的类型对选区内文字进行相应的实时留痕标注。

2.如权利要求1所述的一种基于HTML的稿件审核编辑器的实时留痕标注方法，其特征在于，在该方法中，所述事件操作类型包括删除功能操作和新增功能操作。

3.如权利要求1所述的一种基于HTML的稿件审核编辑器的实时留痕标注方法，其特征在于，在该方法中，所述监听用户的鼠标键盘事件为监听用户的鼠标键盘事件是否包含删除功能操作或者新增功能操作，若是，判断事件操作类型，否则，结束。

4.如权利要求1所述的一种基于HTML的稿件审核编辑器的实时留痕标注方法，其特征在于，在该方法中，当判断出的事件操作类型为删除功能操作时，所述根据当前光标插入点标签字体的类型对选区内文字进行相应的实时留痕标注的具体步骤为：

当标签字体为新增加标注的标签字体时，则为新增内容，执行默认系统操作，直接删除内容；

当标签字体为删除标注的标签字体时，则为删除标注内容，执行恢复文字颜色为黑色；

当标签字体为空时，则为正常内容，执行设置文字颜色为红色。

5.如权利要求1所述的一种基于HTML的稿件审核编辑器的实时留痕标注方法，其特征在于，在该方法中，当判断出的事件操作类型为新增功能操作时，判断是否存在选区；

若存在选区，监听鼠标弹起的响应事件，获取选区开始位置、选区结束位置和光标插入点所在文字节点的文字内容，对选区内文字进行相应的实时留痕标注；

否则，对文字进行相应的实时留痕标注。

6.如权利要求5所述的一种基于HTML的稿件审核编辑器的实时留痕标注方法，其特征在于，在该方法中，当判断出的事件操作类型为新增功能操作时，所述对选区内文字进行相应的实时留痕标注为对选区内文字设置标签字体为删除标注的标签字体并设置颜色为红色，对新增文字再执行设置标签字体为新增加标注的标签字体；

所述文字进行相应的实时留痕标注为设置标签字体为新增加标注的标签字体。

7.一种计算机可读存储介质，其中存储有多条指令，其特征在于，所述指令适于由终端设备的处理器加载并执行如权利要求1-6任一项所述的一种基于HTML的稿件审核编辑器的实时留痕标注方法。

8.一种终端设备，其包括处理器和计算机可读存储介质，处理器用于实现各指令；计算机可读存储介质用于存储多条指令，其特征在于，所述指令适于由处理器加载并执行如权利要求1-6任一项所述的一种基于HTML的稿件审核编辑器的实时留痕标注方法。

9.一种基于HTML的稿件审核编辑器的实时留痕标注装置，其特征在于，基于如权利要求1-6任一项所述的一种基于HTML的稿件审核编辑器的实时留痕标注方法，包括：

初始化模块，被配置为初始化编辑器，预先设置标注样式规则；事件监听模块，被配置为监听用户的鼠标键盘事件，判断事件操作类型；

实时留痕标注模块，被配置为根据不同事件操作类型，分别判断是否存在选区；对删除功能操作，若存在根据当前光标插入点标签字体的类型对选区内文字进行相应的实时留痕标注；否则直接进行相应的实时留痕标注；对新增功能操作直接进行相应的实时留痕标注。

Images