CN113961188A

CN113961188A - 一种基于Web页面的即时渲染编辑方法

Info

Publication number: CN113961188A
Application number: CN202111081093.1A
Authority: CN
Inventors: 王浩; 范渊; 吴永越; 郑学新; 刘韬
Original assignee: Chengdu DBAPPSecurity Co Ltd
Current assignee: Chengdu DBAPPSecurity Co Ltd
Priority date: 2021-09-15
Filing date: 2021-09-15
Publication date: 2022-01-21

Abstract

本发明涉及Web网页技术领域，公开了一种基于Web页面的即时渲染编辑方法，包括：步骤S1.通过Web页面的起始光标输入用户自定义内容；步骤S2.将用户自定义内容传入JavaScript中进行监控，获取监控内容；步骤S3.预设正则表达监控规则，根据正则表达监控规则判断监控内容是否为markdown的语法字符;步骤S4.根据正则表达监控规则判断语法内容是单行语法还是多行语法，判断为单行语法；步骤S5.根据正则表达监控规则判断字符内容是否能够组成一个合markdown语法的字符内容；步骤S6.根据markdown语法和JavaScript创建合法内容对应的HTML字符串，并将计算机内存中记录的合法内容插入到HTML字符串中；步骤S7.根据步骤S4获取的语法内容行数，将字符内容清空，将创建的HTML字符串插入到Web页面起始光标所在的位置。

Description

一种基于Web页面的即时渲染编辑方法

技术领域

本发明涉及Web网页技术领域，具体地说，是一种基于Web页面的即时渲染编辑方法，用于在Web网页提供在线支持markdown语法的编辑系统，让写作者在需要写作时能够随时的在桌面设备、移动设备上打开页面进行写作，保证了写作记录的便携性和专注度。

背景技术

在人们的日常生活以及工作中，写作是十分常见的一个需求，不管是普通的生活记录或者工作的文档编写都离不开编辑软件或系统。对此市场上也出现了各种各样针对各式人群的写作编辑系统，例如最基本写作功能的记事本、具有强大写作功能和样式定制的word以及其他同样在网页中实现的富文本编辑器或分屏预览的markdown编辑器，但是或多或少存在以下问题：

(1)对于熟悉markdown语法的人员来说富文本编辑器会大大降低写作效率。

(2)富文本编辑器需要使用鼠标点击切换文本或段落样式，会打断写作者的思维。

(3)分屏预览模式不利于在移动设备上使用，比如手机、ipad。

(4)分屏预览模式无法做到markdown文本和渲染后的文本在文章位置上一一对应，不利于文本预览。

(5)目前现有的大多数都是不支持桌面端和移动端都适配的编辑器软件，且即使支持了也需要每台设备都去下载，便携性不高。

随着互联网行业的大力发展，越来越多的互联网公司在开发测试时都需要撰写相关的开发、接口等文档。对于不少开发人员来说，传统的富文本编辑系统如word在设置段落或者文本样式的时候需要手离开键盘用鼠标去点击选择对应的样式，这不免会打断写作的连贯性以及降低效率。所以这个时候如果能提供给开发人员一种能够以写代码的方式来编写文档的手段那简直太完美。对此，markdown这门语法应运而生，而目前市面上支持markdown语法的编辑器要么是分屏预览，存在着markdown语法文本和渲染后的文本不能一一对应以及在小屏的设备上不利查看的问题，要么是只支持桌面设备无法随时查看或编辑的问题。所以目前对于不少开发人员来说都需要一种能够随时在线以供访问的实时渲染的markdown编辑器。

综上所述，如何让熟悉markdown语法的如开发人员的写作者能够便捷专注的写作仍然是急需解决的一大难题。本发明通过在Web网页提供在线支持markdown语法的编辑系统，让写作者在需要写作时能够随时的在桌面设备、移动设备上打开页面进行写作，保证了写作记录的便携性和专注度。

发明内容

本发明的目的在于提供一种基于Web页面的即时渲染编辑方法，用于在Web网页提供在线支持markdown语法的编辑系统，让写作者在需要写作时能够随时的在桌面设备、移动设备上打开页面进行写作，保证了写作记录的便携性和专注度。

本发明通过下述技术方案实现：一种基于Web页面的即时渲染编辑方法，包括以下步骤：

步骤S1.通过Web页面的起始光标输入用户自定义内容；

步骤S2.将用户自定义内容传入JavaScript中进行监控，获取监控内容；

步骤S3.预设正则表达监控规则，根据正则表达监控规则判断监控内容是否为markdown的语法字符，如果是，记录语法内容，并进入步骤S3；如果否，返回步骤S1；

步骤S4.根据正则表达监控规则判断语法内容是单行语法还是多行语法，判断为单行语法，记录单行语法内容，获取字符内容并进入步骤S5；判断为多行语法，记录多行语法内容所占的行数，获取字符内容并进入步骤S5；

步骤S5.根据正则表达监控规则判断字符内容是否能够组成一个合markdown语法的字符内容，如果是，获取合markdown语法的合法内容，并通过计算机内存将合法内容记录并存储；如果否，返回步骤S4，直至记录到能够组成合markdown语法的字符内容，获取合markdown语法的合法内容，再通过计算机内存将合法内容记录并存储；

步骤S6.根据markdown语法和JavaScript创建合法内容对应的HTML字符串，并将计算机内存中记录的合法内容插入到HTML字符串中，同时对上一次计算机记录的合法内容进行覆盖更新，获取最新的合法内容；

步骤S7.根据步骤S4获取的语法内容行数，将字符内容清空，并将创建的HTML字符串插入到Web页面起始光标所在的位置。

在本技术方案中，通过JavaScript对输入区域绑定keydown事件监听用户每一次键盘的按下并获取这一次输入的内容，通过markdown特殊的语法字符标及编写对应的正则表达式去匹配输入的内容是否为markdown的语法字符。如果是markdown字符继续判断其为单行语法(如标题、加粗、斜体等)还是多行语法(如代码块、表格等)，若为多行语法则需要将所占的行数记录下来以方便后面替换内容，同时将当前这一次输入的字符内容，如果后续的输入不能组成一个合法的markwodn语法则会一直记录下去，直至能组成一个合法markdown语法。根据markdown语法手动用JavaScript创建对应HTML字符串，并把内存中记录的内容插入到HTML字符串中，同时清除内存中记录的内容。根据前面记录的行数，将其内容清空，然后把创建的HTML插入到起始光标所在的位置。

为了更好地实现本发明，进一步地，步骤S1中的用户自定义内容包括用户每一次键盘的按下并获取这一次输入的内容。

在本技术方案中，记录的用户输入内容更加全面。

为了更好地实现本发明，进一步地，步骤S2包括：

步骤S2.1.获取Web页面输入区域的DOM元素；

步骤S2.2.JavaScript根据DOM元素在输入用户自定义内容的输入区域绑定keydown事件；

步骤S2.3.通过keydown事件对用户自定义内容进行监控。

在本技术方案中，通过绑定同时keydown事件有利于同时展示编辑区与预览区。

为了更好地实现本发明，进一步地，步骤S3中的正则表达监控规则包括markdown的语法字符标规则和编写对应markdown的语法字符标的正则表达式规则。

在本技术方案中，支持markdown语法编辑，编辑文本样式还可以通过Web网页，不会打断写作者的思维，同时可以提高写作效率。

为了更好地实现本发明，进一步地，正则表达式规则包括：预设固定字符类型的正则表达式；

使用预设的正则表达式进行一次监控判断输入的字符内容是否为预设的固定字符类型，如果是，获取输入的字符内容并记录为语法内容，如果否，通过字符匹配对输入的字符进行二次监控，判断输入的字符是否匹配，如果是，获取输入的字符内容并记录为语法内容，如果否，判断输入的字符是不符合markdown的语法字符，将不符合markdown的语法字符进行抛弃操作。

在本技术方案中，通过预设的正则表达式，就不需要在Web页面中同时存在多个编辑器，大大提高生成富文本编辑器的方法性能。

为了更好地实现本发明，进一步地，固定字符类型包括输入内容字符类型、分割线字符类型、待办列表字符类型、有序列表字符类型、无序列表字符类型、引用字符类型、邮箱字符类型和匹配URL字符类型。

为了更好地实现本发明，进一步地，步骤S5中的不符合markdown的语法字符包括字符不存在或者字符为空格。

在本技术方案中，如果下一个字符不存在或者为空格也不做操作返回，在表明不是一个合法的markdown语法时，是不做操作返回的。

为了更好地实现本发明，进一步地，步骤S4中的单行语法包括标题、加粗和斜体。

为了更好地实现本发明，进一步地，步骤S4中的多行语法包括代码和表格。

为了更好地实现本发明，进一步地，本发明的技术方案还包括根据起始光标所在的位置，判断对Web页面的操作；

当起始光标所在的位置和结束光标的位置相同时，监控到用户正在Web页面输入自定义内容；

当起始光标所在的位置和结束光标的位置不同时，监控到用户正在Web页面选中和标记Web页面内容。

在本技术方案中，通过起始光标所在的位置就不再需要编辑文本样式的工具栏保存，不会再出现文本写作10分钟，样式调整半小时的情况。

本发明与现有技术相比，具有以下优点及有益效果：

(1)本发明能够给熟悉markdown语法的人员提供一种快速编辑查看的方式，提供了一种高效易用的文章编写方式；

(2)本发明是一种即时渲染的markdown编辑方法，所见即所得，让编写人员更能专注的写作，提高写作效率；

(3)本发明能够在Web页面实现，是一种在web页面构建的免下载编辑方法，支持任何设备随时查看和编辑，且支持导出与保存，不用下载，更便于使用。

附图说明

本发明结合下面附图和实施例做进一步说明，本发明所有构思创新应视为所公开内容和本发明保护范围。

图1为本发明所提供的一种基于Web页面的即时渲染编辑方法的流程图。

具体实施方式

实施例1：

本实施例的一种基于Web页面的即时渲染编辑方法，如图1所示，包括以下步骤：

步骤S1.通过Web页面的起始光标输入用户自定义内容；

在本实施例中，通过JavaScript对输入区域绑定keydown事件监听用户每一次键盘的按下并获取这一次输入的内容，通过markdown特殊的语法字符标及编写对应的正则表达式去匹配输入的内容是否为markdown的语法字符。如果是markdown字符继续判断其为单行语法(如标题、加粗、斜体等)还是多行语法(如代码块、表格等)，若为多行语法则需要将所占的行数记录下来以方便后面替换内容，同时将当前这一次输入的字符内容，如果后续的输入不能组成一个合法的markwodn语法则会一直记录下去，直至能组成一个合法markdown语法。根据markdown语法手动用JavaScript创建对应HTML字符串，并把内存中记录的内容插入到HTML字符串中，同时清除内存中记录的内容。根据前面记录的行数，将其内容清空，然后把创建的HTML插入到起始光标所在的位置。

实施例2：

本实施例在实施例1的基础上做进一步优化，本实施例的其他部分与实施例1相同，故不再赘述。

实施例3：

本实施例在上述实施例2的基础上做进一步优化，本实施例中通过JavaScript对输入区域绑定keydown事件具体操作如下：

通过const inputArea＝document.getElementById('inputArea')；//获取页面输入区域的DOM元素；通过inputArea.addEventListener('keydown',(event)＝>{//对输入区域绑定keydown事件。

本实施例的其他部分与上述实施例1或2相同，故不再赘述。

实施例4：

本实施例在上述实施例1的基础上做进一步优化，在本实施例中，通过markdown特殊的语法字符标及编写对应的正则表达式去匹配输入的内容是否为markdown的语法字符。

本实施例的其他部分与上述实施例1-3任一项相同，故不再赘述。

实施例5：

本实施例在上述实施例4的基础上做进一步优化，在本实施例中，各个固定字符类型的正则表达式如下：

const HEADING＝/^(#{1,6})/；//代表标题字符类型的正则表达式

const HR＝/^(-{3,}|_{3,})$/；//代表分割线字符类型的正则表达式

const TODO_ITEM＝/^(\s*)(-\[(？:|x)\])()/；//代表待办列表字符类型的正则表达式

const ORDERED_ITEM＝/^(\s*)(\d+)(\.)/；//代表有序列表字符类型的正则表达式

const UNORDERED_ITEM＝/^(\s*)([-])/；//代表无序列表字符类型的正则表达式

const BLOCKQUOTE＝/^(>)/；//代表引用字符类型的正则表达式

const EMAIL＝/(^|\s+)[A-Za-z0-9_\-.]+@[A-Za-z0-9_\-.]+\.[A-Za-z]{2,4}($|\s+)/；//代表邮箱字符类型的正则表达式

const URL＝

/(^|\s+)(？:ht|f)tps？:\/\/[\w-]+(？:\.[\w-]+)+([\w.,@？^＝％&:/～+#-]*[\w@？^＝％&/～+#-])？($|\s+)/；//代表URL字符类型的正则表达式

其他的行内都是通过字符匹配查找的，举例如下：

const em＝create(['*'],'em')；

function create(CHARS,type){//CHARS为['*'],类型为em

return function(state){

const char＝matchChars(CHARS,state,state.index)；//

最终判断是否匹配到传入的字符。

本实施例的其他部分与上述实施例4相同，故不再赘述。

实施例6：

本实施例在上述实施例5的基础上做进一步优化，本实施例的其他部分与上述实施例1-5任一项相同，故不再赘述。

实施例7：

本实施例在上述实施例5的基础上做进一步优化，本实施例的其他部分与上述实施例1-6相同，故不再赘述。

实施例8：

本实施例在上述实施例1的基础上做进一步优化，本实施例中的单行语法包括标题、加粗、斜体、删除线、链接和代码等。

本实施例的其他部分与上述实施例1-7任一项相同，故不再赘述。

实施例9：

本实施例在上述实施例1的基础上做进一步优化，本实施例中的多行语法包括代码、表格、列表、代办等。

本实施例的其他部分与上述实施例1-8任一项相同，故不再赘述。

实施例10：

本实施例在上述实施例1的基础上做进一步优化，在本实施例中光标的起始位置可以通过const start＝window.getSelection().anchorOffset；//查找到；结束位置可以通过const end＝window.getSelection().focusOffset；//查找到。

本实施例的其他部分与上述实施例1-9任一项相同，故不再赘述。

以上所述，仅是本发明的较佳实施例，并非对本发明做任何形式上的限制，凡是依据本发明的技术实质对以上实施例所做的任何简单修改、等同变化，均落入本发明的保护范围之内。

Claims

1.一种基于Web页面的即时渲染编辑方法，其特征在于，所述方法包括以下步骤：步骤S1.通过Web页面的起始光标输入用户自定义内容；步骤S2.将用户自定义内容传入JavaScript中进行监控，获取监控内容；步骤S3.预设正则表达监控规则，根据正则表达监控规则判断监控内容是否为markdown的语法字符，如果是，记录语法内容，并进入步骤S3；如果否，返回步骤S1; 步骤S4.根据正则表达监控规则判断语法内容是单行语法还是多行语法，判断为单行语法，记录单行语法内容，获取字符内容并进入步骤S5；判断为多行语法，记录多行语法内容所占的行数，获取字符内容并进入步骤S5；步骤S5.根据正则表达监控规则判断字符内容是否能够组成一个合markdown语法的字符内容，如果是，获取合markdown语法的合法内容，并通过计算机内存将合法内容记录并存储；如果否，返回步骤S4，直至记录到能够组成合markdown语法的字符内容，获取合markdown语法的合法内容，再通过计算机内存将合法内容记录并存储；步骤S6.根据markdown语法和JavaScript创建合法内容对应的HTML字符串，并将计算机内存中记录的合法内容插入到HTML字符串中，同时对上一次计算机记录的合法内容进行覆盖更新，获取最新的合法内容；步骤S7.根据步骤S4获取的语法内容行数，将字符内容清空，并将创建的HTML字符串插入到Web页面起始光标所在的位置。

2.根据权利要求1所述的一种基于Web页面的即时渲染编辑方法，其特征在于，所述步骤S1中的用户自定义内容包括用户每一次键盘的按下并获取这一次输入的内容。

3.根据权利要求2所述的一种基于Web页面的即时渲染编辑方法，其特征在于，所述步骤S2包括：

步骤S2.1.获取Web页面输入区域的DOM元素；

步骤S2.2.JavaScript根据DOM元素在输入用户自定义内容的输入区域绑定keydown事件；步骤S2.3.通过keydown事件对用户自定义内容进行监控。

4.根据权利要求1所述的一种基于Web页面的即时渲染编辑方法，其特征在于，所述步骤S3中的正则表达监控规则包括markdown的语法字符标规则和编写对应markdown的语法字符标的正则表达式规则。

5.根据权利要求4所述的一种基于Web页面的即时渲染编辑方法，其特征在于，所述正则表达式规则包括：预设固定字符类型的正则表达式；

6.根据权利要求5所述的一种基于Web页面的即时渲染编辑方法，其特征在于，所述固定字符类型包括输入内容字符类型、分割线字符类型、待办列表字符类型、有序列表字符类型、无序列表字符类型、引用字符类型、邮箱字符类型和匹配URL字符类型。

7.根据权利要求5所述的一种基于Web页面的即时渲染编辑方法，其特征在于，所述步骤S5中的不符合markdown的语法字符包括字符不存在或者字符为空格。

8.根据权利要求1所述的一种基于Web页面的即时渲染编辑方法，其特征在于，所述步骤S4中的单行语法包括标题、加粗和斜体。

9.根据权利要求1所述的一种基于Web页面的即时渲染编辑方法，其特征在于，所述步骤S4中的多行语法包括代码和表格。

10.根据权利要求1所述的一种基于Web页面的即时渲染编辑方法，其特征在于，还包括：根据起始光标所在的位置，判断对Web页面的操作；

当起始光标所在的位置和结束光标的位置相同时，监控到用户正在Web页面输入自定义内容；当起始光标所在的位置和结束光标的位置不同时，监控到用户正在Web页面选中和标记Web页面内容。