CN115204119A - 一种基于标记语言的实时富文本编辑系统 - Google Patents

一种基于标记语言的实时富文本编辑系统 Download PDF

Info

Publication number
CN115204119A
CN115204119A CN202210859193.0A CN202210859193A CN115204119A CN 115204119 A CN115204119 A CN 115204119A CN 202210859193 A CN202210859193 A CN 202210859193A CN 115204119 A CN115204119 A CN 115204119A
Authority
CN
China
Prior art keywords
meta
markup language
inline
display
text
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
Application number
CN202210859193.0A
Other languages
English (en)
Inventor
李晨耀
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Qiyun (Shanghai) Technology Co.,Ltd.
Original Assignee
Taipu Technology Studio Hongqiao District Tianjin
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Taipu Technology Studio Hongqiao District Tianjin filed Critical Taipu Technology Studio Hongqiao District Tianjin
Priority to CN202210859193.0A priority Critical patent/CN115204119A/zh
Publication of CN115204119A publication Critical patent/CN115204119A/zh
Pending legal-status Critical Current

Links

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
    • 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/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • 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
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/151—Transformation
    • G06F40/154—Tree transformation for tree-structured or markup documents, e.g. XSLT, XSL-FO or stylesheets

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Data Mining & Analysis (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明涉及一种基于标记语言的实时富文本编辑系统，使用一个webview，文本内容包裹在一个contenteditable的div中，实现即允许展示，也允许编辑；S2、用户在一个块中编辑后，通过监听input事件，触发一个brush函数，该函数会获取该块的textContent，然后通过正则表达式逐字进行解析为AST；S3、匹配/^\r？\n/‑>softbreak类型；S6、使用window.getSelection()获取光标位置，光标所在style加上md‑expand的class，然后使用CSS对.md‑expand meta的内容进行display:inline的显示，实现光标所在位置显示原标记语言的内容。优点：由用户书写简单易学的标记语言，并在同一界面中实时显示该标记语言对应的富文本格式的编辑器。

Description

一种基于标记语言的实时富文本编辑系统
技术领域
本发明涉及计算机技术领域，具体是指一种基于标记语言的实时富文本编辑系统。
背景技术
当前产生富文本的方案主要是通过所见即所得的界面，或者是用户编写源代码，经程序转义后生成富文本内容。
所见即所得的编辑器(比如Word，RTF)用户难以使用纯键盘完成具有多种格式(比如同时包含标题，正文，表格，公式，等格式)的文本。其产出的文本也难以区别样式上的“格式”与结构上的“格式”(例如样式上一段大号加粗居中的句子，它既有可能是样式被调整为大号加粗居中的普通段落，也有可能是样式被调整为大号加粗居中的标题),有些编辑器甚至只有样式的区别，没有结构上的区别。所见即所得的编辑器生成的内容，往往需要安装使用同一标准的程序才能编辑甚至浏览(例如要打开和编辑Word文件，用户就必须安装支持微软相关格式标准或专利技术的软件)。
另一种方式是使用源代码书写(例如LaTeX，HTML，BBCode)，经特定程序转义后显示为富文本内容，比如书写HTML代码<h1>标题</h1>,经浏览器程序转义后显示为一个“标题”。这种方式需要用户具有相关知识，对用户要求较高，用时编写和预览并不能在同一个界面中无缝衔接。
发明内容
本发明解决上述的技术问题，提供一种由用户书写简单易学的标记语言，并在同一界面中实时显示该标记语言对应的富文本格式的基于标记语言的实时富文本编辑系统。
为解决上述技术问题，本发明提供的技术方案为：一种基于标记语言的实时富文本编辑系统，也就是基于Typora轻量级编辑器的实时富文本编辑系统，包括以下步骤：
S1、使用一个webview，文本内容包裹在一个contenteditable的div中，实现即允许展示，也允许编辑；
S2、用户在一个块(block)中编辑后，通过监听input事件，触发一个brush函数，该函数会获取该块的textContent，然后通过正则表达式逐字进行解析为AST(抽象语法树)；
S3、匹配/^\r？\n/->softbreak类型，剩下的文本匹配/^^\\([\\`*{}\[\]()#+\-.！_>$|<～"'&])/->escape类型；剩下的文本匹配/^<\uE016？((([^>]+(@|:)[^>]+))|(\s*www\.[^>]+))\uE017？\uE019？>/->Autolink类型；
S4、对支持的所有inline style逐次类推，直至匹配完所有文本，获得了一个AST；
S5、然后实现一个toHTML函数，将AST转义为HTML：
包括Softbreak-><inline><meta>\n</meta></inline>
Escape->如果是escape了字符X则转移为<inline><meta>\</meta><display>X</display></inline>、
Autolink-><inline><meta><</meta><display type＝”link”href＝”linktarget”>link cotent</display><meta>></meta></inline>；
S6、使用window.getSelection()获取光标位置，光标所在style加上md-expand的class，然后使用CSS对.md-expand meta的内容进行display:inline的显示，实现光标所在位置显示原标记语言的内容。
作为改进，<meta>的部分使用display：none隐藏，<display>的部分显示为对应格式。
作为改进，已经支持的格式包括：一级标题、二级标题、三级标题、四级标题、五级标题、六级标题，正文段落，引用，有序列表，无序列表，任务列表，换行，YAMLFrontMatters，自动目录，超链接，图片，代码，内联公式，加粗，斜体，代码块(支持自动高亮)，公式块，高亮，上标，下标，脚注，水平线，流程图，表格，并且支持基于HTML的扩展。
本发明具有如下优点：本发明系统相对于传统所见即所得的编辑器，用户可以不需要使用鼠标选择格式。用户不需要关系具体的样式，例如用户不需要把一段文字加粗加大居中来让他看起来是一个标题，而其他计算机程序也不需要通过复杂的样式的对比来判断一段较大的文字是小标题还是中标题。用户书写的富文本内容，在本发明产品中存储被纯文本，可以使用任意系统自带的文本编辑软件进行修改，不受以上公开内容的限制。
相对于直接源代码书写，用户可以像在使用所见即所得的编辑器一样实时预览，查看，和修改富文本，而不需要额外的编译程序或者额外的预览窗口。同时，对于对该发明系统所使用的标记语言不熟悉的用户，也可以像所见即所得的编辑器一样从菜单，鼠标右键等UI元件对富文本进行编辑，不需要复杂的学习流程。
具体实施方式
下面对本发明做进一步的详细说明。
一种基于标记语言的实时富文本编辑系统，包括以下步骤：
S1、使用一个webview，文本内容包裹在一个contenteditable的div中，实现即允许展示，也允许编辑；
S2、用户在一个块(block)中编辑后，通过监听input事件，触发一个brush函数，该函数会获取该块的textContent，然后通过正则表达式逐字进行解析为AST(抽象语法树)；
S3、匹配/^\r？\n/->softbreak类型，剩下的文本匹配/^^\\([\\`*{}\[\]()#+\-.！_>$|<～"'&])/->escape类型；剩下的文本匹配/^<\uE016？((([^>]+(@|:)[^>]+))|(\s*www\.[^>]+))\uE017？\uE019？>/->Autolink类型；
S4、对支持的所有inline style逐次类推，直至匹配完所有文本，获得了一个AST；
S5、然后实现一个toHTML函数，将AST转义为HTML：
包括Softbreak-><inline><meta>\n</meta></inline>
Escape->如果是escape了字符X则转移为<inline><meta>\</meta><display>X</display></inline>、
Autolink-><inline><meta><</meta><display type＝”link”href＝”linktarget”>link cotent</display><meta>></meta></inline>；
S6、使用window.getSelection()获取光标位置，光标所在style加上md-expand的class，然后使用CSS对.md-expand meta的内容进行display:inline的显示，实现光标所在位置显示原标记语言的内容。
作为改进，<meta>的部分使用display：none隐藏，<display>的部分显示为对应格式。
作为改进，已经支持的格式包括：一级标题、二级标题、三级标题、四级标题、五级标题、六级标题，正文段落，引用，有序列表，无序列表，任务列表，换行，YAMLFrontMatters，自动目录，超链接，图片，代码，内联公式，加粗，斜体，代码块(支持自动高亮)，公式块，高亮，上标，下标，脚注，水平线，流程图，表格，并且支持基于HTML的扩展。
实施例一
以“强调”为例，其标志语言为**强调**，会显示为HTML的<strong>强调</strong>，对用户来说，看到的默认是加粗的强调二字；
用户在输入，一段包含**强调**的文字，后，会显示为转义后的一段包含强调的文字，而非其原始的一段包含**强调**的文字源码；
但在光标移动至**强调**处时，其标记语言“**”又会完整的显示出来，方便用户对其更改。用户删除*后，源代码更改为一段包含*强调*的文字；
显示为一段包含强调的文字从而完成源代码到最终结果的无缝衔接。
本发明在具体实施时，用户书写的内容经过实时翻译转换为对应的HTML内容，在内置的HTML浏览器中显示出来。用户不需要关心文字具体的字体，颜色，字号，对齐方式等等具体的“样式”，而只要关心它在内容上属于哪一个结构，比如是正文还是标题等，而具体的样式会通过自带的CSS或者用户自定义的CSS文件“附加”上去。
因为本编辑器使用的是基于纯文本的标记语言，所以后续的修改并不限于特定的编辑器，用户可以使用自带的编辑器，例如Vi或者记事本打开并且编辑，这点doc等富文本文件格式是难以做到的。
以上对本发明及其实施方式进行了描述，这种描述没有限制性，实际的结构并不局限于此。总而言之如果本领域的普通技术人员受其启示，在不脱离本发明创造宗旨的情况下，不经创造性的设计出与该技术方案相似的结构方式及实施例，均应属于本发明的保护范围。

Claims (3)

1.一种基于标记语言的实时富文本编辑系统，其特征在于：包括以下步骤：
S1、使用一个webview，文本内容包裹在一个contenteditable的div中，实现即允许展示，也允许编辑；
S2、用户在一个块中编辑后，通过监听input事件，触发一个brush函数，该函数会获取该块的textContent，然后通过正则表达式逐字进行解析为AST；
S3、匹配/^\r？\n/->softbreak类型，剩下的文本匹配/^^\\([\\`*{}\[\]()#+\-.！_>$|<～"'&])/->escape类型；剩下的文本匹配/^<\uE016？((([^>]+(@|:)[^>]+))|(\s*www\.[^>]+))\uE017？\uE019？>/->Autolink类型；
S4、对支持的所有inline style逐次类推，直至匹配完所有文本，获得了一个AST；
S5、然后实现一个toHTML函数，将AST转义为HTML：
包括Softbreak-><inline><meta>\n</meta></inline>
Escape->如果是escape了字符X则转移为<inline><meta>\</meta><display>X</display></inline>、
Autolink-><inline><meta><</meta><display type＝”link”href＝”link target”>link cotent</display><meta>></meta></inline>；
S6、使用window.getSelection()获取光标位置，光标所在style加上md-expand的class，然后使用CSS对.md-expand meta的内容进行display:inline的显示，实现光标所在位置显示原标记语言的内容。
2.根据权利要求1所述的一种基于标记语言的实时富文本编辑系统，其特征在于：<meta>的部分使用display：none隐藏，<display>的部分显示为对应格式。
3.根据权利要求1所述的一种基于标记语言的实时富文本编辑系统，其特征在于：已经支持的格式包括：一级标题、二级标题、三级标题、四级标题、五级标题、六级标题，正文段落，引用，有序列表，无序列表，任务列表，换行，YAMLFront Matters，自动目录，超链接，图片，代码，内联公式，加粗，斜体，代码块(支持自动高亮)，公式块，高亮，上标，下标，脚注，水平线，流程图，表格，并且支持基于HTML的扩展。
CN202210859193.0A 2022-07-20 2022-07-20 一种基于标记语言的实时富文本编辑系统 Pending CN115204119A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210859193.0A CN115204119A (zh) 2022-07-20 2022-07-20 一种基于标记语言的实时富文本编辑系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210859193.0A CN115204119A (zh) 2022-07-20 2022-07-20 一种基于标记语言的实时富文本编辑系统

Publications (1)

Publication Number Publication Date
CN115204119A true CN115204119A (zh) 2022-10-18

Family

ID=83584189

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210859193.0A Pending CN115204119A (zh) 2022-07-20 2022-07-20 一种基于标记语言的实时富文本编辑系统

Country Status (1)

Country Link
CN (1) CN115204119A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115577683A (zh) * 2022-11-23 2023-01-06 中国人民解放军国防科技大学 一种html富文本内容转换方法、装置、设备和介质

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115577683A (zh) * 2022-11-23 2023-01-06 中国人民解放军国防科技大学 一种html富文本内容转换方法、装置、设备和介质

Similar Documents

Publication Publication Date Title
US7176931B2 (en) Modifying hyperlink display characteristics
Carletta et al. The NITE XML toolkit: flexible annotation for multimodal language data
WO2002080030A2 (en) Improvements relating to developing documents
WO2003014965A2 (en) Method of and system for updating a document
JP6866551B2 (ja) 数式処理方法、装置、デバイス及びプログラム
WO2006137563A1 (ja) データ処理装置及びデータ処理方法
WO2006137562A1 (ja) 文書処理装置及び文書処理方法
CN115204119A (zh) 一种基于标记语言的实时富文本编辑系统
Tacchetti User's Guide for ELAN Linguistic Annotator
US20080270887A1 (en) Document Processing Device And Document Processing Method
US20090287994A1 (en) Document processing device and document processing method
CN108345589A (zh) 一种全原文参考的在线翻译方法
Jacobson et al. Linguistic documents synchronizing sound and text
US20070260973A1 (en) Document Processing Method and Device
KR101069278B1 (ko) 청구항 시각화 장치 및 방법
KR20050071720A (ko) 동적으로 홈페이지를 제작하는 방법 및 이 방법을 웹에서구현하는 장치
CN106844297B (zh) 一种用于复杂题型在html上的样式渲染和事件绑定的方法
Javed et al. Palmyra: A platform independent dependency annotation tool for morphologically rich languages
Schmidt EXMARaLDA Partitur-Editor
JP2004038334A (ja) 操作位置記憶方法、構造化文書表示方法、構造化文書表示装置、プログラム、および操作位置記憶データ
Michailovsky et al. A simple architecture for the fine-grained documentation of endangered languages: the LACITO multimedia archive
KR20090055932A (ko) 태그 정보에 기초하여 텍스트를 추출하기 위한 방법,시스템 및 컴퓨터 판독 가능한 기록 매체
Abe et al. A visual approach to authoring XPath expressions
JP2918114B2 (ja) 翻訳表示装置
Ye et al. CSLML: a markup language for expressive Chinese sign language synthesis

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

Effective date of registration: 20230112

Address after: Building C, No.888, Huanhu West 2nd Road, Lingang New District, China (Shanghai) pilot Free Trade Zone, Pudong New Area, Shanghai

Applicant after: Qiyun (Shanghai) Technology Co.,Ltd.

Address before: 300131 610-1-33, Block B, Yintai Science and Technology Building, No. 46, Xianyang North Road, Xiyuzhuang Street, Hongqiao District, Tianjin

Applicant before: Taipu Technology Studio, Hongqiao District, Tianjin

TA01 Transfer of patent application right