CN111241793A - 解析富文本编辑器内容给原生客户端渲染的方法、系统及介质 - Google Patents
解析富文本编辑器内容给原生客户端渲染的方法、系统及介质 Download PDFInfo
- Publication number
- CN111241793A CN111241793A CN202010096232.7A CN202010096232A CN111241793A CN 111241793 A CN111241793 A CN 111241793A CN 202010096232 A CN202010096232 A CN 202010096232A CN 111241793 A CN111241793 A CN 111241793A
- Authority
- CN
- China
- Prior art keywords
- content
- text
- rendering
- media
- content element
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 54
- 238000000034 method Methods 0.000 title claims abstract description 38
- 230000006870 function Effects 0.000 claims description 14
- 230000015572 biosynthetic process Effects 0.000 claims description 6
- 238000004590 computer program Methods 0.000 claims description 6
- 230000011218 segmentation Effects 0.000 claims description 6
- 238000003786 synthesis reaction Methods 0.000 claims description 3
- 230000002194 synthesizing effect Effects 0.000 claims description 3
- 238000005538 encapsulation Methods 0.000 claims 1
- 238000004422 calculation algorithm Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 4
- 238000004364 calculation method Methods 0.000 description 3
- 230000003796 beauty Effects 0.000 description 2
- 230000018109 developmental process Effects 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 230000008878 coupling Effects 0.000 description 1
- 238000010168 coupling process Methods 0.000 description 1
- 238000005859 coupling reaction Methods 0.000 description 1
- 238000007405 data analysis Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000000605 extraction Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Document Processing Apparatus (AREA)
Abstract
本发明公开了一种解析文本编辑器内容给原生客户端渲染的方法、系统及介质，本发明方法包括将富文本编辑器内容分段；针对每一个段落，按照顺序读取内容元素信息，内容元素信息包括内容元素的类型、内容元素对应文本内容或媒体内容的路径、内容元素对应文本格式属性或媒体内容属性，如果内容元素的类型为文本内容，则根据文本格式属性对文本内容使用富文本格式进行渲染；如果内容元素的类型为媒体内容，则根据媒体内容属性对媒体内容使用指定的方式进行渲染。本发明能够将富文本编辑器内容让APP原生去渲染富文本编辑器内容，通过APP原生渲染html结构，不需要webview组件来承载，极大的提升用户体验以及流畅度。
Description
技术领域
本发明涉及移动终端的解析富文本编辑器内容的渲染技术，具体涉及一种富解析文本编辑器内容给原生客户端渲染的方法、系统及介质。
背景技术
富文本编辑器（Rich Text Editor, 简称 RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。富文本编辑器可用于编辑文章等内如以Html的方式进行保存，Html即超文本标记语言(Hyper Text Markup Language)，为标准通用标记语言下的一个应用标准。Html不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。在针对保存后的富文本编辑器（例如一篇文章）内容进行渲染时，目前所有的APP文章内容所渲染的方式是webview组件的方式，也就是网页去渲染编辑器的内容。由于webview是承载在APP里面的一个组件，用于展示网络请求后的结果，也就是将url网络请求的结果展示在里面。因此，现有富文本编辑器内容对外输出是以字符串形式输出，即在编辑器输入内容/插入图片等操作，最后输出的内容无法在APP Native端所见即所得，只能在网页端html业务方进行针对性的解析，才能做到所见即所得的模式。但是，这样会存在下述问题：1、webview组件加载耗时，首次加载会白屏3-5秒或更长的用户等待时间，有时候时间会更长。2、卡顿问题，浏览过程以及webview组件跳转的情况会引起卡顿问题，偶发会造就APP闪退崩溃的情况。3、调用webview组件浏览过程无法使用APP客户端功能，还需要二次去开发，这样极大影响了页面的性能以及用户体验。
此外，现有的富文本编辑器一般为输出基于markdown格式的内容无法直接用于APP渲染，因此如何将现有的富文本编辑器输出基于markdown格式的内容直接用于APP渲染，已经成为一项亟待解决的关键技术问题。
发明内容
本发明要解决的技术问题：针对现有技术的上述问题，提供一种解析文本编辑器内容给原生客户端渲染的方法、系统及介质，本发明能够将富文本编辑器内容让APP原生去渲染富文本编辑器内容，通过APP原生渲染html结构，不需要webview组件来承载，极大的提升用户体验以及流畅度。
为了解决上述技术问题，本发明采用的技术方案为：
一种解析富文本编辑器内容给原生客户端渲染的方法，实施步骤包括：
1）获取富文本编辑器内容；
2）将富文本编辑器内容按照段落进行分段；
3）针对每一个段落，按照自上而下的顺序读取内容元素信息，所述内容元素信息包括内容元素的类型、内容元素对应文本内容或媒体内容的路径、内容元素对应文本格式属性或媒体内容属性，如果内容元素的类型为文本内容，则根据文本格式属性对文本内容使用富文本格式进行渲染；如果内容元素的类型为媒体内容，则根据媒体内容属性对媒体内容使用指定的方式进行渲染。
可选地，所述内容元素的类型为媒体内容具体是指媒体内容为图像、或视频、或音频。
可选地，所述富文本编辑器内容为JSON格式封装。
可选地，步骤1）之前还包括生成富文本编辑器内容的步骤，详细步骤包括：
S1）获取富文本编辑器的编辑内容；
S2）将编辑内容按照段落进行分段并将每一个段落作为一个数组实现数组化；
S3）针对每一个段落中的内容元素，分别确定内容元素的类型为文本内容或媒体内容，若内容元素的类型为文本内容则获取内容元素对应的文本内容并进行统一字符编码，并采用递归的方式找出段落中各个文本内容的所有文本格式属性；若内容元素的类型为媒体内容则获取内容元素对应的URL路径以及媒体内容属性并对URL路径进行统一字符编码，最后按照自上而下的顺序将各个内容元素的类型、内容元素对应文本内容或媒体内容的路径、内容元素对应文本格式属性或媒体内容属性添加到段落的数组中；
S4）将所有的文本格式数据和媒体格式数据进行数据合成得到富文本编辑器内容。
可选地，所述采用递归的方式找出段落中各个文本内容的所有文本格式属性的详细步骤包括：将当前的段落作为初始的待查找内容输入查找函数；通过查找函数在待查找内容中查找文本格式属性定义的起始符号和结束符号，如果查找成功则获取起始符号中的文本格式属性，并将文本格式属性赋予起始符号和结束符号之间的各个文本内容，然后将起始符号和结束符号之间的内容作为新的待查找内容进行递归调用查找函数，直至当前的段落的文本内容全部处理完毕后得到当前的段落各个文本内容的所有文本格式属性。
此外，本发明还提供一种解析富文本编辑器内容给原生客户端渲染的系统，包括：
内容获取程序单元，用于获取富文本编辑器内容；
内容分段程序单元，用于将富文本编辑器内容按照段落进行分段；
格式渲染程序单元，用于针对每一个段落，按照自上而下的顺序读取内容元素信息，所述内容元素信息包括内容元素的类型、内容元素对应文本内容或媒体内容的路径、内容元素对应文本格式属性或媒体内容属性，如果内容元素的类型为文本内容，则根据文本格式属性对文本内容使用富文本格式进行渲染；如果内容元素的类型为媒体内容，则根据媒体内容属性对媒体内容使用指定的方式进行渲染。
可选地，还包括生成富文本编辑器内容的程序模块，该程序模块包括：
编辑内容获取程序单元，用于获取富文本编辑器的编辑内容；
分段处理程序单元，用于将编辑内容按照段落进行分段并将每一个段落作为一个数组实现数组化；
数据格式化程序单元，用于针对每一个段落中的内容元素，分别确定内容元素的类型为文本内容或媒体内容，若内容元素的类型为文本内容则获取内容元素对应的文本内容并进行统一字符编码，并采用递归的方式找出段落中各个文本内容的所有文本格式属性；若内容元素的类型为媒体内容则获取内容元素对应的URL路径以及媒体内容属性并对URL路径进行统一字符编码，最后按照自上而下的顺序将各个内容元素的类型、内容元素对应文本内容或媒体内容的路径、内容元素对应文本格式属性或媒体内容属性添加到段落的数组中；
内容合成程序单元，用于将所有的文本格式数据和媒体格式数据进行数据合成得到富文本编辑器内容。
此外，本发明还提供一种解析富文本编辑器内容给原生客户端渲染的系统，包括计算机设备，该计算机设备被编程或配置以执行所述解析富文本编辑器内容给原生客户端渲染的方法的步骤。
此外，本发明还提供一种解析富文本编辑器内容给原生客户端渲染的系统，包括计算机设备，该计算机设备的存储器上存储有被编程或配置以执行所述解析富文本编辑器内容给原生客户端渲染的方法的计算机程序。
此外，本发明还提供一种计算机可读存储介质，该计算机可读存储介质上存储有被编程或配置以执行所述解析富文本编辑器内容给原生客户端渲染的方法的计算机程序。
和现有技术相比，本发明具有下述优点：
本发明通过将富文本编辑器内容按照段落进行分段；针对每一个段落，按照自上而下的顺序读取内容元素信息，所述内容元素信息包括内容元素的类型、内容元素对应文本内容或媒体内容的路径、内容元素对应文本格式属性或媒体内容属性，如果内容元素的类型为文本内容，则根据文本格式属性对文本内容使用富文本格式进行渲染；如果内容元素的类型为媒体内容，则根据媒体内容属性对媒体内容使用指定的方式进行渲染，因此能够将富文本编辑器内容让APP原生去渲染富文本编辑器内容，通过APP原生渲染html结构，不需要webview组件来承载，极大的提升用户体验以及流畅度。
附图说明
图1为本发明实施例方法的基本流程示意图。
图2为本发明实施例中渲染得到的段落页面内容截图。
图3为本发明实施例中生成富文本编辑器内容的流程示意图。
图4为本发明实施例中的富文本编辑器的编辑内容的截图。
具体实施方式
如图1所示，本实施例解析富文本编辑器内容给原生客户端渲染的方法的实施步骤包括：
1）获取富文本编辑器内容；
2）将富文本编辑器内容按照段落进行分段；
3）针对每一个段落，按照自上而下的顺序读取内容元素信息，所述内容元素信息包括内容元素的类型、内容元素对应文本内容或媒体内容的路径、内容元素对应文本格式属性或媒体内容属性，如果内容元素的类型为文本内容，则根据文本格式属性对文本内容使用富文本格式进行渲染；如果内容元素的类型为媒体内容，则根据媒体内容属性对媒体内容使用指定的方式进行渲染。
上述步骤1）～3）是通过客户端渲染编辑模块实现的，客户端渲染编辑模块获取到了整个富文本编辑器内容后，将在特定的线程中进行解释工作。在解释的同时，对接收到的数据元节点进行校验并丢弃无用的数据元，解释步骤完成后，存储到本地缓存中。下来在同一线程，进行数据元节点（内容元素）的布局计算。客户端渲染编辑模块依次获取缓存中的数据元节点进行计算。其中，存储的数据元是上文中描述的不同类型节点单元，客户端对这些单元，分类别映射对应的原生控件并进行布局计算(Layout)，生成布局节点后将其存入缓存。最后对布局进行渲染。客户端渲染编辑模块从缓存中依次获取布局节点信息，在系统的UI线程中，沿垂直方向上使用原生控件根据布局的要求进行渲染。这样APP客户端就可以解析网页的内容结构，同时解决了webview加载耗时的问题、卡顿问题，不使用webview去加载编辑器里面的内容，就不存在加载耗时以及卡顿，崩溃的情况，提升了用户体验。当APP可以去渲染编辑器内容的时候，不需要去二次开发功能给网页使用，APP可以直接使用已有功能去逻辑处理编辑器输出的内容，有别于现有所有的公众平台webview的渲染方式（微信公众平台，哔哩哔哩公众平台等），不需要去单独开发类似的jsbridge。
本实施例中，内容元素的类型为媒体内容具体是指媒体内容为图像、或视频、或音频。
本实施例中，富文本编辑器内容为JSON格式封装。JSON(JavaScript ObjectNotation, JavaScript对象简谱)格式是一种轻量级的数据交换格式。它基于 ECMAScript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。本实施例中JSON格式封装的富文本编辑器内容具体如下：
Array: [
{"type":5, "APPContent":[
{"attr":[],"text":"圈"},
{"attr":[{"name":"style","value":"font-weight: bold"}],"text":"的},
{"attr":[{"name":"style","value":"color:#7ff853"},{"name":"style","value":"font-weight: bold"}],"text":"新玩法“挑战"},
{"attr":[{"name":"style","value":"color:#7ff853"},{"name":"style","value":"font-size: 24px"},{"name":"style","value":"font-weight: bold"}],"text":"口"},
{"attr":[{"name":"style","value":"background-color:#ff0000"},{"name":"style","value":"color:#7ff853"},{"name":"style","value":"font-size: 24px"},{"name":"style","value":"font-weight: bold"}],"text":"罩"},
{"attr":[{"name":"style","value":"background-color:#ff0000"},{"name":"style","value":"font-size: 24px"},{"name":"style","value":"font-weight:bold"}],"text":"脸”"},
{"attr":[{"name":"style","value":"background-color:#ff0000"},{"name":"style","value":"font-size: 24px"}],"text":"刺激到了~放着"},
{"attr":[{"name":"style","value":"font-size: 24px"}],"text":"美颜不秀，争着去当蒙面"},
{"attr":[],"text":"侠，"}],"text":"圈的新玩法“挑战口罩脸”刺激到了~放着美颜不秀，争着去当蒙面侠，"}],
{"type":2,"url":"https://ugc.hitv.com/3/1906040926490DFE/83230.png","width":"342","imgAspectSwitch":true,"height":"456"}
]
本实施例中，每个内容元素中有唯一的一个标识，告知APP该内容元素的类型(文本/图片/视频)。参见上述代码可知，本实施例中以type值为5表示为内容元素的类型为文本内容，type值为2表示为内容元素的类型为图片内容。
以文本内容"新玩法“挑战"为例，其对应的JSON封装内容为：
{"attr":[{"name":"style","value":"color:#7ff853"},{"name":"style","value":"font-weight: bold"}],"text":"新玩法“挑战"}。
其中，"attr"表示属性，{"name":"style","value":"color:#7ff853"}表示样式的值为颜色为color:#7ff853，{"name":"style","value":"font-weight: bold"}表示样式的值为字体为加粗。
以媒体内容为例，其对应的JSON封装内容为：{"type":2,"url":"https://ugc.hitv.com/3/1906040926490DFE/83230.png","width":"342","imgAspectSwitch":true,"height":"456"}，其中"type":2表示为内容元素的类型为图片内容，"url":https://ugc.hitv.com/3/1906040926490DFE/83230.png表示图片内容的图片路径，"width":"342"表示图片宽度，"imgAspectSwitch":true表示图片自适应方向切换，"height":"456"表示图片高度。本实施例中，对上述富文本编辑器内容进行渲染得到的页面如图2所示。
如图3所示，步骤1）之前还包括生成富文本编辑器内容的步骤，详细步骤包括：
S1）获取富文本编辑器的编辑内容，如图4所示；富文本编辑器的编辑内容可以根据需要采用markdown格式或者html格式；富文本编辑器即Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器；
S2）将编辑内容按照段落进行分段并将每一个段落作为一个数组实现数组化；
S3）针对每一个段落中的内容元素，分别确定内容元素的类型为文本内容或媒体内容，若内容元素的类型为文本内容则获取内容元素对应的文本内容并进行统一字符编码，并采用递归的方式找出段落中各个文本内容的所有文本格式属性；若内容元素的类型为媒体内容则获取内容元素对应的URL路径以及媒体内容属性并对URL路径进行统一字符编码，最后按照自上而下的顺序将各个内容元素的类型、内容元素对应文本内容或媒体内容的路径、内容元素对应文本格式属性或媒体内容属性添加到段落的数组中；
S4）将所有的文本格式数据和媒体格式数据进行数据合成得到富文本编辑器内容。
本实施例中，前述步骤S1）～S4）是在服务器后台完成的，此外也可以根据需要将其集成在富文本编辑器所在的客户端完成。
本实施例中，采用递归的方式找出段落中各个文本内容的所有文本格式属性的详细步骤包括：将当前的段落作为初始的待查找内容输入查找函数；通过查找函数在待查找内容中查找文本格式属性定义的起始符号和结束符号，如果查找成功则获取起始符号中的文本格式属性，并将文本格式属性赋予起始符号和结束符号之间的各个文本内容，然后将起始符号和结束符号之间的内容作为待查找内容进行递归调用查找函数，直至当前的段落的文本内容全部处理完毕后得到当前的段落各个文本内容的所有文本格式属性，从而能够确保编辑的样式能够得到完整地被还原在原生客户端。
例如，markdown格式和html格式均支持多种样式进行嵌套，例如：
<u>下划线字体<font color=Blue>蓝色字符</font></u>
包括文本内容“下划线字体”、文本内容“蓝色字符”，其中“下划线字体”的文本格式属性为下划线，文本内容“蓝色字符”的本格式属性为下划线+蓝色字体。
因此，将“<u>下划线字体<font color=Blue>蓝色字符</font></u>”作为待查找内容时：
首先根据起始符号“<u>”和结束符号“</u>”找出起始符号和结束符号之间的内容：
下划线字体<font color=Blue>蓝色字符</font>
此时获取起始符号中的文本格式属性为下划线，因此将下划线分别赋予文本内容“下划线字体”、文本内容“蓝色字符”；
然后再将起始符号和结束符号之间的内容作为待查找内容进行递归：
根据起始符号“<font color=Blue>”和结束符号“</font>”找出起始符号和结束符号之间的内容：
蓝色字符
此时获取起始符号中的文本格式属性为蓝色字体，因此将蓝色字体赋予文本内容“蓝色字符”。
然后，将文本内容“蓝色字符”继续作为待查找内容进行递归，则不能再找到文本格式属性定义的起始符号和结束符号，因此该部分的查找完成。
递递归算法（英语：recursion algorithm）在计算机科学中是指一种通过重复将问题分解为同类的子问题而解决问题的方法。递归式方法可以被用于解决很多的计算机科学问题，因此它是计算机科学中十分重要的一个概念。绝大多数编程语言支持函数的自调用，在这些语言中函数可以通过调用自身来进行递归。计算理论可以证明递归的作用可以完全取代循环，因此在很多函数编程语言（如Scheme）中习惯用递归来实现循环。本实施例针对富文本编辑器的编辑内容中文本内容的文本格式属性嵌套的特点，通过采用递归能够有效提取出其中文本内容的所有文本格式属性。每个递归结果都包括APP所有需要的结构以及样式结构，是有别于网页结构的。结果按照JSON格式输出到数组里面，保让APP遍历该数组的时候，保持跟段落同等自上而下编写的结构。
具体实现时，本实施例解析富文本编辑器内容给原生客户端渲染的方法的模块分为三大模块：编辑器模块，算法模块，渲染模块。其中，编辑器模块是负责接受图文并茂的内容以及其他媒体资源，算法模块是负责把编辑器模块的内容解析成多种格式，包括不仅限于app所用的数据格式，渲染模块负责选择数据格式进行页面渲染数据，可以避免使用webview组件进行加载。
此外，本实施例解析富文本编辑器内容给原生客户端渲染的方法能够对富文本编辑器的编辑内容可以生成多种数据格式(包括app所需要的渲染格式，浏览器需要的网页格式，以及兼容模式下面的纯文本格式)，便于扩展，以及数据格式的多项选择。本实施例方法的数据解析是在编辑器最终的最终提交流程才做解析，不会实时去做算法处理，避免了页面的性能影响。本实施例方法可以做更多方面的数据处理，包括不仅限于页面渲染，例如还可以按条件去做数据条件提取。本实施例方法的APP渲染方式通过此编辑器包括不仅限于网页/原生的渲染方式，可以根据其生成的数据结构做更多的业务耦合。
此外，本实施例还提供一种解析富文本编辑器内容给原生客户端渲染的系统，包括：
内容获取程序单元，用于获取富文本编辑器内容；
内容分段程序单元，用于将富文本编辑器内容按照段落进行分段；
格式渲染程序单元，用于针对每一个段落，按照自上而下的顺序读取内容元素信息，所述内容元素信息包括内容元素的类型、内容元素对应文本内容或媒体内容的路径、内容元素对应文本格式属性或媒体内容属性，如果内容元素的类型为文本内容，则根据文本格式属性对文本内容使用富文本格式进行渲染；如果内容元素的类型为媒体内容，则根据媒体内容属性对媒体内容使用指定的方式进行渲染。
此外，本实施例还包括生成富文本编辑器内容的程序模块，该程序模块包括：
编辑内容获取程序单元，用于获取富文本编辑器的编辑内容；
分段处理程序单元，用于将编辑内容按照段落进行分段并将每一个段落作为一个数组实现数组化；
数据格式化程序单元，用于针对每一个段落中的内容元素，分别确定内容元素的类型为文本内容或媒体内容，若内容元素的类型为文本内容则获取内容元素对应的文本内容并进行统一字符编码，并采用递归的方式找出段落中各个文本内容的所有文本格式属性；若内容元素的类型为媒体内容则获取内容元素对应的URL路径以及媒体内容属性并对URL路径进行统一字符编码，最后按照自上而下的顺序将各个内容元素的类型、内容元素对应文本内容或媒体内容的路径、内容元素对应文本格式属性或媒体内容属性添加到段落的数组中；
内容合成程序单元，用于将所有的文本格式数据和媒体格式数据进行数据合成得到富文本编辑器内容。
此外，本实施例还提供一种解析富文本编辑器内容给原生客户端渲染的系统，包括计算机设备，该计算机设备被编程或配置以执行前述解析富文本编辑器内容给原生客户端渲染的方法的步骤。
此外，本实施例还提供一种解析富文本编辑器内容给原生客户端渲染的系统，包括计算机设备，该计算机设备的存储器上存储有被编程或配置以执行前述解析富文本编辑器内容给原生客户端渲染的方法的计算机程序。
此外，本实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有被编程或配置以执行前述解析富文本编辑器内容给原生客户端渲染的方法的计算机程序。
以上所述仅是本发明的优选实施方式，本发明的保护范围并不仅局限于上述实施例，凡属于本发明思路下的技术方案均属于本发明的保护范围。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理前提下的若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。
Claims (10)
1.一种解析富文本编辑器内容给原生客户端渲染的方法，其特征在于实施步骤包括：
1）获取富文本编辑器内容；
2）将富文本编辑器内容按照段落进行分段；
3）针对每一个段落，按照自上而下的顺序读取内容元素信息，所述内容元素信息包括内容元素的类型、内容元素对应文本内容或媒体内容的路径、内容元素对应文本格式属性或媒体内容属性，如果内容元素的类型为文本内容，则根据文本格式属性对文本内容使用富文本格式进行渲染；如果内容元素的类型为媒体内容，则根据媒体内容属性对媒体内容使用指定的方式进行渲染。
2.根据权利要求1所述的解析富文本编辑器内容给原生客户端渲染的方法，其特征在于，所述内容元素的类型为媒体内容具体是指媒体内容为图像、或视频、或音频。
3.根据权利要求1所述的解析富文本编辑器内容给原生客户端渲染的方法，其特征在于，所述富文本编辑器内容为JSON格式封装。
4.根据权利要求1或2或3所述的解析富文本编辑器内容给原生客户端渲染的方法，其特征在于，步骤1）之前还包括生成富文本编辑器内容的步骤，详细步骤包括：
S1）获取富文本编辑器的编辑内容；
S2）将编辑内容按照段落进行分段并将每一个段落作为一个数组实现数组化；
S3）针对每一个段落中的内容元素，分别确定内容元素的类型为文本内容或媒体内容，若内容元素的类型为文本内容则获取内容元素对应的文本内容并进行统一字符编码，并采用递归的方式找出段落中各个文本内容的所有文本格式属性；若内容元素的类型为媒体内容则获取内容元素对应的URL路径以及媒体内容属性并对URL路径进行统一字符编码，最后按照自上而下的顺序将各个内容元素的类型、内容元素对应文本内容或媒体内容的路径、内容元素对应文本格式属性或媒体内容属性添加到段落的数组中；
S4）将所有的文本格式数据和媒体格式数据进行数据合成得到富文本编辑器内容。
5.根据权利要求4所述的解析富文本编辑器内容给原生客户端渲染的方法，其特征在于，所述采用递归的方式找出段落中各个文本内容的所有文本格式属性的详细步骤包括：将当前的段落作为初始的待查找内容输入查找函数；通过查找函数在待查找内容中查找文本格式属性定义的起始符号和结束符号，如果查找成功则获取起始符号中的文本格式属性，并将文本格式属性赋予起始符号和结束符号之间的各个文本内容，然后将起始符号和结束符号之间的内容作为新的待查找内容进行递归调用查找函数，直至当前的段落的文本内容全部处理完毕后得到当前的段落各个文本内容的所有文本格式属性。
6.一种解析富文本编辑器内容给原生客户端渲染的系统，其特征在于包括：
内容获取程序单元，用于获取富文本编辑器内容；
内容分段程序单元，用于将富文本编辑器内容按照段落进行分段；
格式渲染程序单元，用于针对每一个段落，按照自上而下的顺序读取内容元素信息，所述内容元素信息包括内容元素的类型、内容元素对应文本内容或媒体内容的路径、内容元素对应文本格式属性或媒体内容属性，如果内容元素的类型为文本内容，则根据文本格式属性对文本内容使用富文本格式进行渲染；如果内容元素的类型为媒体内容，则根据媒体内容属性对媒体内容使用指定的方式进行渲染。
7.根据权利要求6所述的解析富文本编辑器内容给原生客户端渲染的系统，其特征在于，还包括生成富文本编辑器内容的程序模块，该程序模块包括：
编辑内容获取程序单元，用于获取富文本编辑器的编辑内容；
分段处理程序单元，用于将编辑内容按照段落进行分段并将每一个段落作为一个数组实现数组化；
数据格式化程序单元，用于针对每一个段落中的内容元素，分别确定内容元素的类型为文本内容或媒体内容，若内容元素的类型为文本内容则获取内容元素对应的文本内容并进行统一字符编码，并采用递归的方式找出段落中各个文本内容的所有文本格式属性；若内容元素的类型为媒体内容则获取内容元素对应的URL路径以及媒体内容属性并对URL路径进行统一字符编码，最后按照自上而下的顺序将各个内容元素的类型、内容元素对应文本内容或媒体内容的路径、内容元素对应文本格式属性或媒体内容属性添加到段落的数组中；
内容合成程序单元，用于将所有的文本格式数据和媒体格式数据进行数据合成得到富文本编辑器内容。
8.一种解析富文本编辑器内容给原生客户端渲染的系统，包括计算机设备，其特征在于，该计算机设备被编程或配置以执行权利要求1～5中任意一项所述解析富文本编辑器内容给原生客户端渲染的方法的步骤。
9.一种解析富文本编辑器内容给原生客户端渲染的系统，包括计算机设备，其特征在于，该计算机设备的存储器上存储有被编程或配置以执行权利要求1～5中任意一项所述解析富文本编辑器内容给原生客户端渲染的方法的计算机程序。
10.一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有被编程或配置以执行权利要求1～5中任意一项所述解析富文本编辑器内容给原生客户端渲染的方法的计算机程序。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010096232.7A CN111241793B (zh) | 2020-02-17 | 2020-02-17 | 解析富文本编辑器内容给原生客户端渲染的方法、系统及介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010096232.7A CN111241793B (zh) | 2020-02-17 | 2020-02-17 | 解析富文本编辑器内容给原生客户端渲染的方法、系统及介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111241793A true CN111241793A (zh) | 2020-06-05 |
| CN111241793B CN111241793B (zh) | 2023-12-08 |
Family
ID=70865095
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010096232.7A Active CN111241793B (zh) | 2020-02-17 | 2020-02-17 | 解析富文本编辑器内容给原生客户端渲染的方法、系统及介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111241793B (zh) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111861651A (zh) * | 2020-07-10 | 2020-10-30 | 上海悦易网络信息技术有限公司 | 一种商品发布页搭建的方法及设备 |
| CN112836469A (zh) * | 2021-01-27 | 2021-05-25 | 北京百家科技集团有限公司 | 一种信息渲染方法及装置 |
| CN114510907A (zh) * | 2020-11-16 | 2022-05-17 | 福建天泉教育科技有限公司 | 一种富文本展示和刷新的方法及终端 |
| CN114579712A (zh) * | 2022-05-05 | 2022-06-03 | 中科雨辰科技有限公司 | 基于动态模型的文本属性提取匹配方法 |
| CN115859919A (zh) * | 2023-03-02 | 2023-03-28 | 北京智启蓝墨信息技术有限公司 | 一种存储结构化的富格式文本的方法及系统 |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20080020052A (ko) * | 2006-08-30 | 2008-03-05 | 엘지전자 주식회사 | 이동통신단말기의 텍스트 디스플레이 방법 및 이를수행하기 위한 이동통신단말기 |
| US20090259949A1 (en) * | 2008-04-15 | 2009-10-15 | Microsoft Corporation | Cross-browser rich text editing via a hybrid client-side model |
| CN102799592A (zh) * | 2011-05-26 | 2012-11-28 | 腾讯科技（深圳）有限公司 | 富文本文档的解析方法和系统 |
| CN103279559A (zh) * | 2013-06-13 | 2013-09-04 | 北京神鹰城讯科技有限公司 | 基于安卓系统的富文本编辑方法及富文本编辑器 |
| CN105095161A (zh) * | 2014-05-07 | 2015-11-25 | 腾讯科技（北京）有限公司 | 一种显示富文本信息的方法及装置 |
| CN106371844A (zh) * | 2016-08-31 | 2017-02-01 | 北京奇艺世纪科技有限公司 | 一种用原生用户界面组件展示网页的方法及系统 |
| US20170212964A1 (en) * | 2016-01-27 | 2017-07-27 | Veeva Systems Inc. | System and method for dynamic content rendering |
| US20180189250A1 (en) * | 2016-12-30 | 2018-07-05 | Dropbox, Inc. | Inline content item editor commands |
| CN108389244A (zh) * | 2018-02-14 | 2018-08-10 | 上海钦文信息科技有限公司 | 一种根据指定字符规则渲染出flash富文本的实现方法 |
| CN109299444A (zh) * | 2017-07-25 | 2019-02-01 | 北京国双科技有限公司 | 一种富文本编辑器的生成方法及装置 |
-
2020
- 2020-02-17 CN CN202010096232.7A patent/CN111241793B/zh active Active
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20080020052A (ko) * | 2006-08-30 | 2008-03-05 | 엘지전자 주식회사 | 이동통신단말기의 텍스트 디스플레이 방법 및 이를수행하기 위한 이동통신단말기 |
| US20090259949A1 (en) * | 2008-04-15 | 2009-10-15 | Microsoft Corporation | Cross-browser rich text editing via a hybrid client-side model |
| CN102799592A (zh) * | 2011-05-26 | 2012-11-28 | 腾讯科技（深圳）有限公司 | 富文本文档的解析方法和系统 |
| CN103279559A (zh) * | 2013-06-13 | 2013-09-04 | 北京神鹰城讯科技有限公司 | 基于安卓系统的富文本编辑方法及富文本编辑器 |
| CN105095161A (zh) * | 2014-05-07 | 2015-11-25 | 腾讯科技（北京）有限公司 | 一种显示富文本信息的方法及装置 |
| US20170212964A1 (en) * | 2016-01-27 | 2017-07-27 | Veeva Systems Inc. | System and method for dynamic content rendering |
| CN106371844A (zh) * | 2016-08-31 | 2017-02-01 | 北京奇艺世纪科技有限公司 | 一种用原生用户界面组件展示网页的方法及系统 |
| US20180189250A1 (en) * | 2016-12-30 | 2018-07-05 | Dropbox, Inc. | Inline content item editor commands |
| CN109299444A (zh) * | 2017-07-25 | 2019-02-01 | 北京国双科技有限公司 | 一种富文本编辑器的生成方法及装置 |
| CN108389244A (zh) * | 2018-02-14 | 2018-08-10 | 上海钦文信息科技有限公司 | 一种根据指定字符规则渲染出flash富文本的实现方法 |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111861651A (zh) * | 2020-07-10 | 2020-10-30 | 上海悦易网络信息技术有限公司 | 一种商品发布页搭建的方法及设备 |
| CN114510907A (zh) * | 2020-11-16 | 2022-05-17 | 福建天泉教育科技有限公司 | 一种富文本展示和刷新的方法及终端 |
| CN112836469A (zh) * | 2021-01-27 | 2021-05-25 | 北京百家科技集团有限公司 | 一种信息渲染方法及装置 |
| CN114579712A (zh) * | 2022-05-05 | 2022-06-03 | 中科雨辰科技有限公司 | 基于动态模型的文本属性提取匹配方法 |
| CN114579712B (zh) * | 2022-05-05 | 2022-07-15 | 中科雨辰科技有限公司 | 基于动态模型的文本属性提取匹配方法 |
| CN115859919A (zh) * | 2023-03-02 | 2023-03-28 | 北京智启蓝墨信息技术有限公司 | 一种存储结构化的富格式文本的方法及系统 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111241793B (zh) | 2023-12-08 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111241793A (zh) | 解析富文本编辑器内容给原生客户端渲染的方法、系统及介质 | |
| RU2358311C2 (ru) | Документ текстовой обработки, хранящийся в едином файле xml, которым могут манипулировать приложения, понимающие язык xml | |
| US7305612B2 (en) | Systems and methods for automatic form segmentation for raster-based passive electronic documents | |
| US6801673B2 (en) | Section extraction tool for PDF documents | |
| CN111142988B (zh) | 页面测试方法、装置、存储介质及电子设备 | |
| US8219901B2 (en) | Method and device for filtering elements of a structured document on the basis of an expression | |
| CN106294493B (zh) | 实现文档格式转换的方法及装置 | |
| JP2009093658A (ja) | ウェブ文書編集方法及び装置 | |
| CN110209387B (zh) | 一种顶层hdl文件生成方法和装置、计算机可读存储介质 | |
| CN112417338B (zh) | 一种页面适配方法、系统及设备 | |
| CN113609820A (zh) | 基于可扩展标记语言文件生成word文件的方法、装置及设备 | |
| CN113283228A (zh) | 文档生成方法、装置、电子设备及存储介质 | |
| CN114238575A (zh) | 文档解析方法、系统、计算机设备及计算机可读存储介质 | |
| CN111158687B (zh) | Java插件的界面生成方法、装置、计算机设备和存储介质 | |
| CN113360106B (zh) | 一种网页打印方法和装置 | |
| CN111124481A (zh) | 网页应用程序的安装包生成方法、装置、存储介质及设备 | |
| CN112114803B (zh) | 基于深度学习的ui界面的前端代码生成方法、设备及介质 | |
| CN114021042A (zh) | 网页内容的提取方法、装置、计算机设备和存储介质 | |
| CN102193789B (zh) | 一种实现可配置跳转链接的方法和设备 | |
| CN115268904A (zh) | 一种用户界面设计文件生成方法、装置、设备及介质 | |
| EP1783628A1 (en) | Document processing method and device | |
| EP1780645A1 (en) | Document processing method and device | |
| CN116204692A (zh) | 网页数据提取方法、装置、电子设备及存储介质 | |
| CN115169292A (zh) | 文档处理方法、装置、电子设备及计算机可读存储介质 | |
| CN110554860B (zh) | 一种软件项目自然语言编程接口nli的构造方法及代码生成方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |