CN115859919A

CN115859919A - 一种存储结构化的富格式文本的方法及系统

Info

Publication number: CN115859919A
Application number: CN202310188843.8A
Authority: CN
Inventors: 靳新; 袁玉强; 张莹莹; 张伟; 卢漪; 薛敏
Original assignee: Beijing Zhiqi Lanmo Information Technology Co ltd
Current assignee: Beijing Zhiqi Lanmo Information Technology Co ltd
Priority date: 2023-03-02
Filing date: 2023-03-02
Publication date: 2023-03-28

Abstract

本发明涉及数据处理技术领域，且公开了一种存储结构化的富格式文本的方法及系统，主要基于浏览器端的富格式文本编辑器，接受编辑者输入的内容,生成展示视图；基于所述编辑者输入的内容，对所述浏览器端编辑者输入的内容执行一套对应的结构化数据进行跟踪，根据结构化数据跟踪，在所述浏览器端转化生成结构化数据；通过跟踪代码，对浏览器侧的编辑文档的结构化数据跟踪，自动对其中的内容进行结构化分析，其中可定义DOM元素和结构化数据模型的转化模式以及转化规则,实现自动对富格式文本内容进行结构化分析，能方便快捷的将已经编辑好的内容文档予以更换，从而提高操作效率。

Description

一种存储结构化的富格式文本的方法及系统

技术领域

本发明涉及数据处理技术领域，具体为一种存储结构化的富格式文本的方法及系统。

背景技术

常见的基于浏览器的，都是通过将HTML中的DOM元素设置为可以编辑的，然后用户在浏览器中即可编写富格式内容，富文本编辑器(Rich Text Editor，RTE)是一种可内嵌于浏览器，所见即所得的文本编辑器。富文本编辑器可对文本进行不同的格式化处理，采用富文本编辑器编辑的富文本通常带有丰富的格式设置，可读性更强。

但是这种方案编写的富格式内容在保存的时候实际上就是一段HTML源代码以及其引用的富格式文件，例如：图片、音频、视频等，很难通过程序自动对其中的内容进行结构化分析，例如：段落之间的关系、图片和文本内容的关系、图片自动编号等，对于内容的解析和复用带来了一些障碍；同时，如果需要更换已经编辑好的内容的排版、配色、样式等，也难以实现。

发明内容

本发明主要是提供一种存储结构化的富格式文本的方法及系统，以解决对于内容视图中，已经编辑好的内容文档难以更换的问题。

解决上述技术问题，本发明采用如下技术方案：

基于目前浏览器的富格式内容编辑器都是通过将HTML中的DOM元素设置为可以编辑的，然后用户在浏览器中即可编写富格式内容，我们提出通过跟踪代码，对浏览器侧的编辑文档的结构化数据跟踪，自动对其中的内容进行结构化分析，其中可定义DOM元素和结构化数据模型的转化模式以及转化规则。

第一方面，本发明提供一种存储结构化的富格式文本的方法，包括：

启动浏览器端，基于浏览器端的富格式文本编辑器，接受编辑者输入的内容,生成展示视图；

基于所述编辑者输入的内容，对所述浏览器端编辑者输入的内容执行一套对应的结构化数据进行跟踪，根据结构化数据跟踪，在所述浏览器端转化生成结构化数据；

通过所述浏览器端对所述结构化数据进行检测，当所述浏览器端检测到所述结构化数据的整体数据发生变化时，将所述结构化数据发送到服务器端保存为结构化数据模型；

基于所述结构化数据模型，所述浏览器端把结构化数据模型转换为DOM元素；

刷新所述DOM元素，生成新展示视图，将新展示视图更新到所述浏览器端，编辑者继续编辑。

进一步的，在启动浏览器端，基于浏览器端的富格式文本编辑器，接受编辑者输入的内容,生成展示视图中，所述编辑者输入的内容，包括：

图片、视频、音频、画廊、公式、文本段落、表格、列表项、编号项。

进一步的，在通过所述浏览器端对所述结构化数据进行检测，当所述浏览器端检测到所述结构化数据的整体数据发生变化时，将所述结构化数据发送到服务器端保存为结构化数据模型中，所述结构化数据模型，包括：所述结构化数据模型采用JSON方式存储数据。

进一步的，在基于所述结构化数据模型，所述浏览器端把所述服务器端的结构化数据模型转换为DOM元素中，包括：结构化数据模型通过编辑者所编辑定义的模式转换为DOM元素。

进一步的，利用所述编辑者编辑定义的模式定义编辑文档的结构和/或内容，并利用所述编辑者编辑定义JSON和DOM之间的转换规则。

第二方面，一种存储结构化的富格式文本的系统，包括：

展示视图模块，用于启动浏览器端，基于浏览器端的富格式文本编辑器，接受编辑者输入的内容,生成展示视图；

结构化数据跟踪模块，用于基于所述编辑者输入的内容，对所述浏览器端编辑者输入的内容执行一套对应的结构化数据进行跟踪，根据结构化数据跟踪，在所述浏览器端转化生成结构化数据；

结构化数据生成模块，用于通过所述浏览器端对所述结构化数据进行检测，当所述浏览器端检测到所述结构化数据的整体数据发生变化时，将所述结构化数据发送到服务器端保存为结构化数据模型；

DOM元素转化模块，用于基于所述结构化数据模型，所述浏览器端把结构化数据模型转换为DOM元素；

新展示视图更新模块，用于刷新所述DOM元素，生成新展示视图，将新展示视图更新到所述浏览器端，编辑者继续编辑。

进一步的，在展示视图模块中，包括：图片、视频、音频、画廊、公式、文本段落、表格、列表项、编号项。

进一步的，在结构化数据生成模块中，包括：所述结构化数据模型采用JSON方式存储数据。

进一步的，在DOM元素转化模块中，包括：

定义模式单元，用于结构化数据模型通过编辑者所编辑定义的模式转换为DOM元素。

进一步的，所述定义模式单元中，还包括：

用于利用编辑者编辑定义的模式定义编辑文档的结构和/或内容，以及定义JSON和DOM之间的转换规则。

有益效果：本发明提供的一种存储结构化的富格式文本的方法及系统，通过在浏览器侧用户输入的内容执行一套对应的结构化数据跟踪，根据结构化数据跟踪对用户编辑的内容能完全读取与感知；本发明通过在浏览器中对编辑的文档内容进行解析结构化数据，并转换到HTML页面并进行呈现，能方便快捷的将已经编辑好的内容文档予以更换；所述结构化数据模型采用JSON方式存储数据，采用JSON方式存储数据的优势是既能够记录原始的数据，又可以通过不同的属性记录该数据片段对应的样式。

附图说明

图1为存储结构化富格式文本的方法流程示意图；

图2为存储结构化富格式文本的系统模块示意图。

具体实施方式

以下将结合实施例对本发明涉及的一种存储结构化的富格式文本的方法及系统技术方案进一步详细说明。

需要说明的是，这些实施例仅用于说明本发明，而不是对本发明的限制，在本发明的构思前提下本方法的简单改进，都属于本发明要求保护的范围。

本发明基于目前浏览器的富格式内容编辑器都是通过将HTML中的DOM元素设置为可以编辑的，然后用户在浏览器中即可编写富格式内容，我们提出通过跟踪代码，对浏览器侧的编辑文档的结构化数据跟踪，自动对其中的内容进行结构化分析，其中可定义DOM元素和结构化数据模型的转化模式以及转化规则。

参见图1，为一种存储结构化的富格式文本的方法，

S100:启动浏览器端，基于浏览器端的富格式文本编辑器，接受编辑者输入的内容,生成展示视图；

具体的，在浏览器中编辑内容的时候是“所见即所得”的，所述浏览器中编辑内容为用户输入的内容，包含：图片、视频、音频、画廊、公式、文本段落、表格、列表项、编号项。

S200:基于所述编辑者输入的内容，对所述浏览器端编辑者输入的内容执行一套对应的结构化数据进行跟踪，根据结构化数据跟踪，在所述浏览器端转化生成结构化数据。

具体的，根据结构化数据跟踪对用户编辑的内容能完全读取与感知，所述结构化数据跟踪中设有跟踪代码，代码对用户编辑的内容具有完全的“控制”，即代码永远能够感知用户在什么地方、做了什么操作；

具体的，代码永远能够感知用户在什么地方、做了什么操作指:使用JavaScript代码监听浏览器的mousedown、mouseup、keyup、keydown、input等事件；在用户鼠标点击的时候，根据鼠标点击的位置确定光标所在的位置对应在JSON结构化数据中的节点，以及光标在该节点内容中的位置。例如，一段呈现在编辑器文字“强大中国”，对应的JSON数据为：{"content":["type": "text", "text": "创建文本"]}，当用户将光标定位到“创建”和“文本”之间的时候，通过监听鼠标事件，确定对应的JSON数据中，光标是位于2这个位置。

当用户输入了一个“的”字，代码通过监听input事件，得知用户输入了一个“的”字。找到对应JSON数据光标所在的节点{"content":["type": "text", "text": "创建的文本"]}，以及光标所在的位置2，就可以对JSON数据进行相应的变更：在2的位置插入“的”字，JSON数据相应的变成：{"content":["type": "text", "text": "创建的文本"]}，同时记录光标位置为3，“文本”二字的位置都要加1，因为前面插入了1个“的”字。数据变更完成之后，重新计算DOM元素，并刷新用户的展示视图。此时，用户看到所编写的内容更新为“创建的文本”，并且，在“的”字之后有一个闪动的光标。

其中，除了通过监听事件得知光标的位置、用户的输入，还通过监听针对工作表的事件来获取用户选中的区域和内容，当用户通过鼠标拉选来选择视图内容时，JSON数据也会通过判断用户所选择的内容来确定选择区域的开始位置和结束位置分别位于对应结构化数据的位置。当在有选中内容的时候，用户开始输入，此时就变成了使用用户输入的内容替换选区的内容。

其中，诸如插入图片、音视频等富媒体资源的时候逻辑是一致的，和文字内容的主要区别是一张图片、一个视频等，不存在中间位置，也就是无法把光标定位到图片或者视频的中间。

S300:通过所述浏览器端对所述结构化数据进行检测，当所述浏览器端检测到所述结构化数据的整体数据发生变化时，将所述结构化数据发送到服务器端保存为结构化数据模型型；

具体的，所述结构化数据模型采用JSON方式存储数据，采用JSON方式存储数据的优势是既能够记录原始的数据即用户输入的内容，又可以通过不同的属性记录该数据片段对应的样式，例如：字体、字号、字色、背景颜色、背景图片等。

其中，用户完成编辑之后，向服务器提交请求，把内容对应的JSON数据发送给服务器，服务器进行保存，目前支持的内容有：图片、视频、音频、画廊、公式、文本段落、表格、列表项、编号项。

S400:基于所述结构化数据模型，所述浏览器端把结构化数据模型转换为DOM元素；

具体的，以用户输入“这是一段很重要的内容”，然后把输入文字中的“重要”二字加粗、斜体、设置成红色整个操作为例，对应的步骤如下：

步骤	用户输入	模型（JSON数据）	DOM元素
				1	<空白文档>	{ "doc": {"type": "doc","content": []}, "selection": {"type": "text","anchor": 1,"head": 1 }}	<divcontenteditable=”true”></div>
2	输入“这是一段很重要的内容”	{ "doc": {"type": "doc","content": [{"type": "paragraph","content": [{"type": "text","text": "这是一段很重要的内容"}] }]}, "selection": {"type": "text","anchor": 11,"head": 11 }}	<divcontenteditable=”true”><p>这是一段很重要的内容</p></div>
				3	选中“重要”二字	{ "doc": {"type": "doc","content": [{"type": "paragraph","content": [{"type": "text","text": "这是一段很重要的内容"}] }]}, "selection": {"type": "text","anchor": 6,"head": 8 }}	<divcontenteditable=”true”><p>这是一段很重要的内容</p></div>
4	通过功能按钮将选中的“重要”二字加粗	{ "doc": {"type": "doc","content": [{"type": "paragraph","content": [{"type": "text","text": "这是一段很"}, {"type": "text","text": "重要","marks": [{"type": "strong"}] },{"type": "text","text": "的内容"}] }]}, "selection": {"type": "text","anchor": 6,"head": 8 }}	<divcontenteditable=”true”><p>这是一段很<strong>重要</strong>的内容</p></div>
				5	通过功能按钮将选中的“重要”二字增加斜体	{ "doc": {"type": "doc","content": [{"type": "paragraph","content": [{"type": "text","text": "这是一段很"}, {"type": "text","text": "重要","marks": [{"type": "strong"}, {"type": "em"}] },{"type": "text","text": "的内容"}] }]}, "selection": {"type": "text","anchor": 6,"head": 8 }}	<divcontenteditable=”true”><p>这是一段很<em><strong>重要</strong></em>的内容</p></div>
6	通过功能按钮将选中的“重要”二字设置为红色	{ "doc": {"type": "doc","content": [{"type": "paragraph","content": [{"type": "text","text": "这是一段很"}, {"type": "text","text": "重要","marks": [{"type": "strong"}, {"type": "em"}, {"type": "text_color","attrs": {"color": "#f20d0d"}}] },{"type": "text","text": "的内容"}] }]}, "selection": {"type": "text","anchor": 6,"head": 8 }}	<divcontenteditable=”true”><p>这是一段很<em><strong><spanstyle="color:#f20d0d" color="#f20d0d">重要</span></strong></em>的内容</p></div>

具体的，结构化数据模型通过编辑者所编辑定义的模式转换为DOM元素；

其中，用户的每一次操作都对JSON数据产生影响，JSON数据发生变化之后，重新生成对应的DOM元素，然后再更新到浏览器侧上，对用户而言，就达到了“所见即所得”的效果，但是实际上服务器侧只需保存JSON数据即可还原用户编辑的文档。

S500:刷新所述DOM元素，生成新展示视图，将新展示视图更新到所述浏览器端，编辑者继续编辑。

作为一种可实施方式，基于所述结构化数据模型，所述浏览器侧把所述服务器侧的结构化数据模型转换为DOM元素中，结构化数据模型通过用户编辑定义的模式转换为DOM元素。

具体的，利用所述编辑者编辑定义的模式定义编辑文档的结构和/或内容，并利用所述编辑者编辑定义JSON和DOM之间的转换规则。

例如：以上面的操作为例，对应的模式定义为：JavaScript 代码，

其中：{

nodes: {

doc: {

content: 'block+',

attrs: {

layout: { default: null },

padding: { default: null },

width: { default: '' },

}

},

text: {

isText: true,

group: 'inline',

},

paragraph: {

content: 'inline*',

group: 'block',

attrs: {

id: { default: '' },

alignX: { default: 'left' },

},

toDOM: node => {

const { id, alignX } = node.attrs;

return ['p', {

'data-id': id,

'data-align-x': alignX,

style: `text-align: ${alignX}`

}, 0];

},

parseDOM: [{

tag: 'p',

getAttrs: dom => {

return {

id: dom.getAttribute('data-id') || '',

alignX: dom.getAttribute('data-align-x') || 'left'

};

}

}]

}

},

marks: {

em: {

group: 'inline',

toDom: () => ['em', {}, 0],

parseDOM: [{ tag: 'em' }]

},

strong: {

group: 'inline',

toDOM: () => ['strong', 0],

parseDOM: [{ tag: 'strong' }]

},

text_color: {

inline: true,

group: 'inline',

attrs: {

color: { default: '' },

},

toDOM: node => {

return [`span`, {

style: `color:${node.attrs.color}`,

color: node.attrs.color

}, 0];

},

parseDOM: [{

tag: 'span[color]',

getAttrs: node => {

return { color: node.getAttribute('color') || ''};

}

}],

}

以上模式中定义了文档的结构，其中包括在其内容中允许插入哪些内容，同时也定义了JSON和HTML之间的转换规则,由此方式方便快捷的将已经编辑好的内容文档予以更换，提高了用户的工作效率。

其中，JSON和HTML存在互相转换模式，所述互相转换模式设有校验以及容错的机制，让模式转化更加准确。

参见图2，为本发明提供一种存储结构化的富格式文本的系统，其中有：

展示视图模块01，用于启动浏览器端，基于浏览器端的富格式文本编辑器，接受编辑者输入的内容,生成展示视图；

具体的，在浏览器中编辑内容的时候是“所见即所得”的，所述浏览器中编辑内容为用户输入的内容，包括：文本段落、表格、列表项、编号项、图片、视频、音频、画廊、公式。

具体的，根据结构化数据跟踪对用户编辑的内容能完全读取与感知，所述结构化数据跟踪中设有跟踪代码，代码对用户编辑的内容具有完全的“控制”；

具体的，使用JavaScript代码监听浏览器的mousedown、mouseup、keyup、keydown、input等事件；在用户鼠标点击的时候，根据鼠标点击的位置确定光标所在的位置对应在JSON结构化数据中的节点，以及光标在该节点内容中的位置。例如，一段呈现在编辑器文字“强大中国”，对应的JSON数据为：{"content":["type": "text", "text": "创建文本"]}，当用户将光标定位到“创建”和“文本”之间的时候，通过监听鼠标事件，确定对应的JSON数据中，光标是位于2这个位置。

结构化数据生成模块02，用于通过所述浏览器端对所述结构化数据进行检测，当所述浏览器端检测到所述结构化数据的整体数据发生变化时，将所述结构化数据发送到服务器端保存为结构化数据模型；

DOM元素转化模块04，用于基于所述结构化数据模型，所述浏览器端把结构化数据模型转换为DOM元素；

新展示视图更新模块05，用于刷新所述DOM元素，生成新展示视图，将新展示视图更新到所述浏览器端，编辑者继续编辑。

作为一种可实施方式，定义模式单元06，用于结构化数据模型通过编辑者所编辑定义的模式转换为DOM元素，其中，定义模式单元，还用于利用用户编辑定义的模式定义编辑文档的结构和/或内容，以及定义JSON和DOM之间的转换规则,其中，JSON和HTML存在互相转换模式，所述互相转换模式设有校验以及容错的机制，让模式转化更加准确。

本技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本公开的范围。

在本公开所提供的实施例中，应该理解到，所揭露的装置/计算机设备和方法，可以通过其它的方式实现。例如，以上所描述的装置/计算机设备实施例仅仅是示意性的，例如，模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。

作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读存储介质中。基于这样的理解，本公开实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，计算机程序可以存储在计算机可读存储介质中，该计算机程序在被处理器执行时，可以实现上述各个方法实施例的步骤。计算机程序可以包括计算机程序代码，计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。计算机可读介质可以包括：能够携带计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器（Read-Only Memory，ROM）、随机存取存储器（Random Access Memory，RAM）、电载波信号、电信信号以及软件分发介质等。需要说明的是，计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如，在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

以上实施例仅用以说明本公开的技术方案，而非对其限制；尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本公开各实施例技术方案的精神和范围，均应包含在本公开的保护范围之内。

Claims

1.一种存储结构化的富格式文本的方法，其特征在于，包括：

2.根据权利要求1所述的一种存储结构化的富格式文本的方法，其特征在于，在启动浏览器端，基于浏览器端的富格式文本编辑器，接受编辑者输入的内容,生成展示视图中，所述编辑者输入的内容，包括：

3.根据权利要求1所述的一种存储结构化的富格式文本的方法，其特征在于，在通过所述浏览器端对所述结构化数据进行检测，当所述浏览器端检测到所述结构化数据的整体数据发生变化时，将所述结构化数据发送到服务器端保存为结构化数据模型中，所述结构化数据模型，包括：所述结构化数据模型采用JSON方式存储数据。

4.根据权利要求1所述的一种存储结构化的富格式文本的方法，其特征在于，在基于所述结构化数据模型，所述浏览器端把所述服务器端的结构化数据模型转换为DOM元素中，包括：结构化数据模型通过编辑者所编辑定义的模式转换为DOM元素。

5.根据权利要求4所述的一种存储结构化的富格式文本的方法，其特征在于，包括：利用所述编辑者编辑定义的模式定义编辑文档的结构和/或内容，并利用所述编辑者编辑定义JSON和DOM之间的转换规则。

6.一种存储结构化的富格式文本的系统，其特征在于，包括：

7.根据权利要求6所述的一种存储结构化的富格式文本的系统，其特征在于，在展示视图模块中，包括：图片、视频、音频、画廊、公式、文本段落、表格、列表项、编号项。

8.根据权利要求6所述的一种存储结构化的富格式文本的系统，其特征在于，在结构化数据生成模块中，包括：所述结构化数据模型采用JSON方式存储数据。

9.根据权利要求6所述的一种存储结构化的富格式文本的系统，其特征在于，在DOM元素转化模块中，包括：

10.根据权利要求9所述的一种存储结构化的富格式文本的系统，其特征在于，定义模式单元，还包括：