CN114997119A - 一种调整阅读效果的富文本编辑方法 - Google Patents
一种调整阅读效果的富文本编辑方法 Download PDFInfo
- Publication number
- CN114997119A CN114997119A CN202210613862.6A CN202210613862A CN114997119A CN 114997119 A CN114997119 A CN 114997119A CN 202210613862 A CN202210613862 A CN 202210613862A CN 114997119 A CN114997119 A CN 114997119A
- Authority
- CN
- China
- Prior art keywords
- text
- user
- pause
- mute
- text editing
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 49
- 230000000694 effects Effects 0.000 title claims abstract description 13
- 238000002372 labelling Methods 0.000 claims abstract description 23
- 238000001914 filtration Methods 0.000 claims abstract 2
- 238000012544 monitoring process Methods 0.000 claims abstract 2
- 238000009877 rendering Methods 0.000 claims abstract 2
- 238000013515 script Methods 0.000 claims description 19
- 238000003780 insertion Methods 0.000 claims description 3
- 230000037431 insertion Effects 0.000 claims description 3
- 230000006870 function Effects 0.000 abstract description 26
- 238000011161 development Methods 0.000 abstract description 5
- 238000010586 diagram Methods 0.000 description 7
- 230000002452 interceptive effect Effects 0.000 description 3
- 238000013461 design Methods 0.000 description 2
- 238000012966 insertion method Methods 0.000 description 2
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 230000002159 abnormal effect Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000003111 delayed effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明涉及文本编辑技术领域，尤其涉及一种调整阅读效果的富文本编辑方法。包括：监听用户操作，包括用户键盘输入或粘贴的文本；过滤掉所述文本格式，得到纯文本数据；将所述纯文本数据复制到用户视图输入框；用户在所述用户视图输入框内进行划取标注操作，同时用户执行文本编辑操作；所述标注操作包括以下中的至少一个：停顿标注、静音标注、多音字标注；得到用户的标注操作和文本编辑操作数据后，重渲染到用户视图输入框。本发明采用DOM标签模拟文本域进行文本编辑，保证了灵活性，功能丰富而且可扩展；其次，使用系统自带光标，开发方案更简洁清晰，降低了操作延迟，使用更流畅，同时降低了系统故障率。
Description
技术领域
本发明涉及文本编辑技术领域，尤其涉及一种调整阅读效果的富文本编辑方法。
背景技术
随着自媒体的发展和TTS的发展，调整阅读效果的文本编辑需求旺盛，客户端编辑过于繁琐，包含很多对于普通用户来说冗余的功能，因此出现了许多的多功能网页版富文本编辑器，更灵活和低成本地推动了自媒体、TTS等的发展。而用户的使用需求，也变得越来越高标准，灵活、流畅、故障率低成为重点。
编辑人员开启文本编辑系统，看到文本编辑输入框和编辑操作功能按钮，输入或粘贴待编辑的文本内容，文本编辑系统接收输入或粘贴的文本，运行文本过滤处理程序来过滤不必要的格式，得到过滤后的文本，展示在交互显示界面上，编辑人员通过文本编辑功能按钮在所述交互显示界面上进行交互式编辑操作；文本编辑系统通过编辑规则处理装置利用编辑规则辅助编辑人员的编辑操作，编辑后得到添加了停顿、静音、多音字标注的精确文本。
以下介绍两种现有编辑方法，并介绍本发明要解决的一系列的明显问题：
1、利用文本域进行编辑的方法，方法是输入或粘贴内容到文本域，标注的内容插入到对应文本位置的后面。该方法标注的选项展示在文本域的外部，操作过程中容易使操作人丢失操作文本的位置；插入的停顿或多音字等标注会以文本字符形式展示，无法通过css语言对标注进行样式编写，标注与原始文本混在一起造成阅读不便，从而造成修改时效率很低。
2、纯dom标签控制文本编辑的方法，利用dom标签模拟输入框，利用输入框模拟光标来记录用户操作，每一个字符都是一个dom标签。由原理可以看出该方法可以实现更丰富的功能，但是dom标签过多会导致页面操作卡顿，输入框模拟的光标有延迟，从而带来的问题是无法便捷高效地进行连续的操作。在从word或wps等软件批量复制文本进入该方法时，无法很好地过滤掉多余的格式，需要用户手动进行修改文本格式，从而降低了效率，不够便捷。
为了解决上述技术问题，我们提出了本发明的一种调整阅读效果的富文本编辑方法。
发明内容
本发明的目的是提供一种调整阅读效果的富文本编辑方法，用于解决背景技术中的现有技术问题。
为了实现上述目的，本发明采用了如下技术方案：
一种调整阅读效果的富文本编辑方法，包括以下步骤：
步骤1.监听用户操作，包括用户键盘输入或粘贴的文本；
步骤2.过滤掉所述文本格式，得到纯文本数据；
步骤3.将所述纯文本数据复制到用户视图输入框；
步骤4.用户在所述用户视图输入框内进行划取标注操作，同时用户执行文本编辑操作；
所述标注操作包括以下中的至少一个：停顿标注、静音标注、多音字标注；
步骤5.得到用户的标注操作和文本编辑操作数据后，重渲染到用户视图输入框；
步骤6.采用基于DOM的原生getChildren方法解析并得到用户视图输入框中的数据。
进一步优选的，步骤1中，监听用户操作，为采用js脚本监听用户操作。
进一步优选的，步骤4中，停顿标注实现方法包括：
设置一个停顿按钮，当用户点击所述停顿按钮时，基于JavaScript脚本的定位方式实现：在文本光标上方展示一个弹窗，并展示可选择的停顿类别；
当用户选择完毕停顿类别后，基于JavaScript脚本的insertNode方法实现：在光标处插入一个含有所述停顿类别的图片；
所述停顿类别包括：无停顿、长、中、短。
进一步优选的，步骤4中，静音标注实现方法包括：
设置一个插入静音按钮，当用户点击所述插入静音按钮时，基于JavaScript脚本的定位方式实现：在文本光标上方出现一个弹窗，并展示可选择的静音时长按钮或者自定义静音时长；
当客户选择完毕静音时长后，基于JavaScript脚本的insertNode方法实现：在光标处插入一个含有所述静音时长的DOM标签。
进一步优选的，步骤4中，多音字标注实现方法包括：
设置一个多音字按钮，当用户点击所述多音字按钮时，基于JavaScript脚本的定位方式实现：在文本光标上方出现一个弹窗，并展示该汉字的所有音标；
当客户选择音标后，基于JavaScript脚本的insertNode方法实现：在光标处插入一个含有所述音标的DOM标签；
所述DOM标签通过DIV标签的中的contenteditable属性实现。
本发明至少具备以下有益效果：
本发明采用DOM标签模拟文本域进行文本编辑，保证了灵活性，功能丰富而且可扩展；其次，使用系统自带光标，开发方案更简洁清晰，降低了操作延迟，使用更流畅，同时降低了系统故障率。
附图说明
为了更清楚地说明本发明实施例技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为文本编辑整体流程示意图；
图2为停顿标注功能原理示意图；
图3为停顿标注功能具体展示实例图；
图4为静音标注功能原理示意图；
图5为静音标注功能具体展示实例图；
图6为多音字标注功能原理示意图；
图7为多音字标注功能具体展示实例图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
本发明为一种调整阅读效果的富文本编辑方法，整体设计目的是为了方便用户编辑文章或信息。
整个系统的核心功能可以分为以下几个模块进行阐述：文本编辑整体使用流程、停顿标注功能、静音标注功能、多音字标注功能。此编辑器需要在chrome浏览器上运行。
1.文本编辑整体流程
具体参阅图1，该模块具体阐述了该技术方案实现的完整流程。具体有如下步骤：
1.1.通过js脚本监听用户的操作，包括用户键盘输入或文本粘贴；
1.2.将用户输入的数据格式化操作，此目的为得到纯文本数据，防止页面排版异常；
1.3.将格式化过滤的数据在视图输入框上进行展示；
1.4.用户在输入框中的文字或空白处进行划取标注，此时获取到需要进行标注的区域；
1.5.用户执行编辑功能操作；
1.6.得到用户的操作后的数据并重渲染到视图输入框中；
1.7.基于DOM的原生getChildren方法解析并得到视图中的数据。
2.文本编辑器停顿标注功能原理
具体参阅图2，停顿标注功能作用目的是为了可视化地展示当前文本阅读需要注意停顿的地方。具体实现如下：
2.1.设置一个停顿按钮，当用户点击所述停顿按钮时，会在文本光标上方出现一个弹窗(图3-①)，该弹窗中会展示可选择的停顿类别区域，弹窗位置实现的方式是基于JavaScript脚本的定位方式实现。
2.2.当用户选择完毕并点击弹窗内的停顿类别会在输入框的光标处(图3-②)插入一个含有所述停顿类别的图片，该图片的插入是基于JavaScript脚本的insertNode方法来实现。
3.文本编辑器静音标注功能原理
具体参阅图4，静音标注功能作用是为了可视化地展示当前文本阅读需要静音的地方。具体实现如下：
3.1.设置一个插入静音按钮，当用户点击所述插入静音按钮时，插入静音按钮功能会在文本光标上方出现一个弹窗(图5-①)，该弹窗中会展示可选择的静音时长按钮，弹窗位置实现的方式是基于JavaScript脚本的定位方式实现。
3.2.点击弹窗内的停顿类别会在输入框的光标处(图5-②)插入一个含有所述静音时长的DOM标签，该插入方式是基于JavaScript脚本的insertNode方法来实现。
4.文本编辑器多音字标注功能原理
具体参阅图6，多音字标注功能的作用，当一个汉字有多种读法时，可以将该汉字的读音和汉字绑定，可视化地展示在输入框中。具体实现如下：
4.1.多音字按钮功能会在选中的文本上方出现一个弹窗(图7-①)，该弹窗中会展示该汉字的所有音标，弹窗位置实现的方式是基于JavaScript脚本的定位方式实现。
4.2.点击弹窗内的停顿类别会在输入框的文字选中处(图7-②)插入一个自定义DOM标签，该DOM标签可以将汉字和汉字音标进行绑定，该DOM标签的实现方式是基于DIV标签的中的contenteditable属性实现，该标签的插入方式是基于JavaScript脚本的insertNode方法来实现。
由此，通过上述设计：
本发明标注以标签方式展示，便于阅读和查找；其次，使用开发语言原生属性，提高了页面元素模拟文本域的性能，同时兼具了开发多功能的灵活性，从而使用该编辑器能得到更精确的结果。使用系统自带光标，大大减少了延迟和故障率。并且在复制带有格式的文本内容(如换行符等)的时候，能够自动有效地过滤掉影响编辑的格式，大大节省了时间成本。
以上显示和描述了本发明的基本原理、主要特征和本发明的优点。本行业的技术人员应该了解，本发明不受上述实施例的限制，上述实施例和说明书中描述的只是本发明的原理，在不脱离本发明精神和范围的前提下本发明还会有各种变化和改进，这些变化和改进都落入要求保护的本发明的范围内。本发明要求的保护范围由所附的权利要求书及其等同物界定。
Claims (5)
1.一种调整阅读效果的富文本编辑方法，其特征在于，包括以下步骤：
步骤1.监听用户操作，包括用户键盘输入或粘贴的文本；
步骤2.过滤掉所述文本格式，得到纯文本数据；
步骤3.将所述纯文本数据复制到用户视图输入框；
步骤4.用户在所述用户视图输入框内进行划取标注操作，同时用户执行文本编辑操作；
所述标注操作包括以下中的至少一个：停顿标注、静音标注、多音字标注；
步骤5.得到用户的标注操作和文本编辑操作数据后，重渲染到用户视图输入框；
步骤6.采用基于DOM的原生getChildren方法解析并得到用户视图输入框中的数据。
2.根据权利要求1所述的一种调整阅读效果的富文本编辑方法，其特征在于，步骤1中，监听用户操作，为采用js脚本监听用户操作。
3.根据权利要求1所述的一种调整阅读效果的富文本编辑方法，其特征在于，步骤4中，停顿标注实现方法包括：
设置一个停顿按钮，当用户点击所述停顿按钮时，基于JavaScript脚本的定位方式实现：在文本光标上方展示一个弹窗，并展示可选择的停顿类别；
当用户选择完毕停顿类别后，基于JavaScript脚本的insertNode方法实现：在光标处插入一个含有所述停顿类别的图片；
所述停顿类别包括：无停顿、长、中、短。
4.根据权利要求1所述的一种调整阅读效果的富文本编辑方法，其特征在于，步骤4中，静音标注实现方法包括：
设置一个插入静音按钮，当用户点击所述插入静音按钮时，基于JavaScript脚本的定位方式实现：在文本光标上方出现一个弹窗，并展示可选择的静音时长按钮或者自定义静音时长；
当客户选择完毕静音时长后，基于JavaScript脚本的insertNode方法实现：在光标处插入一个含有所述静音时长的DOM标签。
5.根据权利要求1所述的一种调整阅读效果的富文本编辑方法，其特征在于，步骤4中，多音字标注实现方法包括：
设置一个多音字按钮，当用户点击所述多音字按钮时，基于JavaScript脚本的定位方式实现：在文本光标上方出现一个弹窗，并展示该汉字的所有音标；
当客户选择音标后，基于JavaScript脚本的insertNode方法实现：在光标处插入一个含有所述音标的DOM标签；
所述DOM标签通过DIV标签的中的contenteditable属性实现。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210613862.6A CN114997119A (zh) | 2022-06-01 | 2022-06-01 | 一种调整阅读效果的富文本编辑方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210613862.6A CN114997119A (zh) | 2022-06-01 | 2022-06-01 | 一种调整阅读效果的富文本编辑方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114997119A true CN114997119A (zh) | 2022-09-02 |
Family
ID=83030487
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210613862.6A Pending CN114997119A (zh) | 2022-06-01 | 2022-06-01 | 一种调整阅读效果的富文本编辑方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114997119A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115577683A (zh) * | 2022-11-23 | 2023-01-06 | 中国人民解放军国防科技大学 | 一种html富文本内容转换方法、装置、设备和介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112069805A (zh) * | 2019-12-20 | 2020-12-11 | 北京来也网络科技有限公司 | 结合rpa与ai的文本标注方法、装置、设备及存储介质 |
| CN113836877A (zh) * | 2021-09-28 | 2021-12-24 | 北京百度网讯科技有限公司 | 一种文本标注方法、装置、设备以及存储介质 |
| CN113963681A (zh) * | 2021-10-22 | 2022-01-21 | 平安科技（深圳）有限公司 | 基于文本编辑器的语音合成方法、系统和存储介质 |
-
2022
- 2022-06-01 CN CN202210613862.6A patent/CN114997119A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112069805A (zh) * | 2019-12-20 | 2020-12-11 | 北京来也网络科技有限公司 | 结合rpa与ai的文本标注方法、装置、设备及存储介质 |
| CN113836877A (zh) * | 2021-09-28 | 2021-12-24 | 北京百度网讯科技有限公司 | 一种文本标注方法、装置、设备以及存储介质 |
| CN113963681A (zh) * | 2021-10-22 | 2022-01-21 | 平安科技（深圳）有限公司 | 基于文本编辑器的语音合成方法、系统和存储介质 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115577683A (zh) * | 2022-11-23 | 2023-01-06 | 中国人民解放军国防科技大学 | 一种html富文本内容转换方法、装置、设备和介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10671251B2 (en) | Interactive eReader interface generation based on synchronization of textual and audial descriptors | |
| CN110442822B (zh) | 一种小程序内容展示方法、装置、设备及存储介质 | |
| US10929449B2 (en) | Generating a structured document guiding view | |
| KR101183416B1 (ko) | 전자 문서에 문서 파트들을 생성, 삽입, 및 재사용하는방법, 시스템, 및 컴퓨터 판독가능 매체 | |
| RU2537776C2 (ru) | Основанная на разметке расширяемость для интерфейсов пользователя | |
| US8510647B2 (en) | Computer programming and markup language source code visualization tool | |
| CN110489116A (zh) | 一种页面的渲染方法、装置及计算机存储介质 | |
| US9275025B2 (en) | Interactive special paste | |
| US20070209004A1 (en) | Automated E-Learning and Presentation Authoring System | |
| CN113849257B (zh) | 页面处理方法、装置、介质及电子设备 | |
| CN114415986A (zh) | 文书模板的定制及打印方法、装置及计算机可读介质 | |
| CN114997119A (zh) | 一种调整阅读效果的富文本编辑方法 | |
| US7080316B2 (en) | Method for determining rubies | |
| CN112596732A (zh) | 一种电子教材制作方法及系统 | |
| CN111626023A (zh) | 可视化图表高亮与注释的自动生成方法、装置及系统 | |
| CN117032666A (zh) | 基于编辑器的页面编辑方法、装置、终端设备及存储介质 | |
| Cisco | Creating a Web-enabled Client Application | |
| KR20040090866A (ko) | 폼을 이용하는 ｘｍｌ 문서 편집기 및 ｘｍｌ 문서편집기가 기록된 컴퓨터로 읽을 수 있는 기록 매체 | |
| Mishra | Practical Highcharts with Angular: Your Essential Guide to Creating Real-time Dashboards | |
| CN120297237A (zh) | Ssml编辑方法和装置 | |
| CN114492336A (zh) | 一种应用于采购过程公告的Web文档可视化编辑方法及装置 | |
| CN116306488A (zh) | 一种书籍的内容展示方法及装置 | |
| CN120387436A (zh) | 富文本智能处理方法、装置、网络附加存储设备和系统 | |
| CN116090428A (zh) | 一种基于xml的工具书在线协同编纂系统 | |
| CN118567629A (zh) | 一种Python教学定制模块的实现方法 |
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 | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20250320 Address after: No. 1-862, Juhe Sixth Street, Jufuyuan Industrial Park, Tongzhou District Economic Development Zone, Beijing 101100 Applicant after: Beijing Infinite Luen Technology Co.,Ltd. Country or region after: China Address before: 310000 room 403-5, 4th floor, building 5, No. 970-1, Gaojiao Road, Wuchang Street, Yuhang District, Hangzhou, Zhejiang Province Applicant before: Hangzhou Yingying Sound Technology Co.,Ltd. Country or region before: China |