一款开源的Markdown转富文本编辑器的实现原理剖析

简介: 笔者平时写文章使用的都是Markdown,但是发布的时候就会遇到一些平台不支持Markdown的情况,重排是不可能重排的,所以都会使用一些Markdown转富文本的工具,比如markdown-nice,用的多了就会好奇是怎么实现的,于是就有了本篇文章。

笔者平时写文章使用的都是Markdown,但是发布的时候就会遇到一些平台不支持Markdown的情况,重排是不可能重排的,所以都会使用一些Markdown转富文本的工具,比如markdown-nice,用的多了就会好奇是怎么实现的,于是就有了本篇文章。
markdown-nice是一个基于React构建的项目,先来看一下它的整体页面:

一个顶部工具栏,中间三个并列的区域,分别是编辑区域、预览区域、自定义主题区域,自定义主题区域默认是隐藏的。
大体上就是一个Markdown编辑器,增加了一些对各个平台的适配而已。
编辑器
编辑器使用的是CodeMirror,具体来说是一个二次封装的组件React-CodeMirror:
import CodeMirror from "@uiw/react-codemirror";

class App extends Component {

render() {
    return (
        <CodeMirror
              value={this.props.content.content}
              options={{
                theme: "md-mirror",// 主题
                keyMap: "sublime",// 快捷键
                mode: "markdown",// 模式,也就是语言类型
                lineWrapping: true,// 开启超长换行
                lineNumbers: false,// 不显示行号
                extraKeys: {// 配置快捷键
                  ...bindHotkeys(this.props.content, this.props.dialog),
                  Tab: betterTab,
                  RightClick: rightClick,
                },
              }}
              onChange={this.handleThrottleChange}
              onScroll={this.handleScroll}
              onFocus={this.handleFocus}
              onBlur={this.handleBlur}
              onDrop={this.handleDrop}
              onPaste={this.handlePaste}
              ref={this.getInstance}
            />
    )
}

}
复制代码
快捷键、命令
markdown-nice通过extraKeys选项设置一些快捷键,此外还在工具栏中增加了一些快捷按钮:

这些快捷键或者命令按钮操作文本内容的逻辑基本是一致的,先获取当前选区的内容:
const selected = editor.getSelection()
复制代码
然后进行加工修改:
**${selected}**
复制代码
最后替换选区的内容:
editor.replaceSelection(**${selected}**)
复制代码
此外也可以修改光标的位置来提升体验,比如加粗操作后光标位置会在文字后面,而不是*后面就是因为markdown-nice在替换完选区内容后还修改了光标的位置:

export const bold = (editor, selection) => {
editor.replaceSelection(**${selection}**);
const cursor = editor.getCursor();
cursor.ch -= 2;// 光标位置向前两个字符
editor.setCursor(cursor);
};
复制代码
表格
Markdown的表格语法手写起来是比较麻烦的,markdown-nice对于表格只提供了帮你插入表格语法符号的功能,你可以输入要插入的表格行列数:

确认以后会自动插入符号:

实现其实就是一个字符串的拼接逻辑:
const text = this.buildFormFormat(this.state.rowNum, this.state.columnNum);

buildFormFormat = (rowNum, columnNum) => {

let formFormat = "";
// 最少会创建三行
for (let i = 0; i < 3; i++) {
    formFormat += this.buildRow(i, columnNum);
}
// 超过三行
for (let i = 3; i <= rowNum; i++) {
    formFormat += this.buildRow(i, columnNum);
}
return formFormat;

};

buildRow = (rowNum, columnNum) => {

let appendText = "|";
// 第一行为表头和内容的分隔
if (rowNum === 1) {
    appendText += " --- |";
    for (let i = 0; i < columnNum - 1; i++) {
        appendText += " --- |";
    }
} else {
    appendText += "     |";
    for (let i = 0; i < columnNum - 1; i++) {
        appendText += "     |";
    }
}
return appendText + (/windows|win32/i.test(navigator.userAgent) ? "\r\n" : "\n");

};
复制代码
表格字符生成以后替换当前选区内容即可:
handleOk = () => {

const {markdownEditor} = this.props.content;
const cursor = markdownEditor.getCursor();

const text = this.buildFormFormat(this.state.rowNum, this.state.columnNum);
markdownEditor.replaceSelection(text);

cursor.ch += 2;
markdownEditor.setCursor(cursor);
markdownEditor.focus();

};
复制代码
同样修改了光标位置并且让编辑器重新聚焦。

相关文章
|
4月前
|
Ubuntu Linux 测试技术
Linux系统之部署轻量级Markdown文本编辑器
【10月更文挑战第6天】Linux系统之部署轻量级Markdown文本编辑器
215 1
Linux系统之部署轻量级Markdown文本编辑器
|
16天前
|
Linux UED C++
MarkEdit:相信做技术的同学都会喜欢这个编辑器的,MarkEdit编辑器,让Markdown编辑变得简单而强大,超赞~~~
嗨,大家好,我是小华同学。MarkEdit是一款跨平台的Markdown编辑器,支持Windows、macOS和Linux,提供实时预览、快捷键、自定义主题和插件系统等核心功能。它适用于日常笔记、技术文档、博客写作、学术论文和电子书制作等多种场景。
109 31
|
1月前
|
人工智能 文字识别 自然语言处理
Vision Parse:开源的 PDF 转 Markdown 工具,结合视觉语言模型和 OCR,识别文本和表格并保持原格式
Vision Parse 是一款开源的 PDF 转 Markdown 工具,基于视觉语言模型,能够智能识别和提取 PDF 中的文本和表格,并保持原有格式和结构。
171 19
Vision Parse:开源的 PDF 转 Markdown 工具,结合视觉语言模型和 OCR,识别文本和表格并保持原格式
|
2月前
|
人工智能 文字识别 数据挖掘
MarkItDown:微软开源的多格式转Markdown工具,支持将PDF、Word、图像和音频等文件转换为Markdown格式
MarkItDown 是微软开源的多功能文档转换工具,支持将 PDF、PPT、Word、Excel、图像、音频等多种格式的文件转换为 Markdown 格式,具备 OCR 文字识别、语音转文字和元数据提取等功能。
335 9
MarkItDown:微软开源的多格式转Markdown工具,支持将PDF、Word、图像和音频等文件转换为Markdown格式
|
3月前
|
人工智能 移动开发 前端开发
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
Markdown-to-Image 是一款开源的在线 Markdown 转海报编辑器,能够将 Markdown 文本内容转换为图像,适用于创建社交媒体帖子、海报和其他视觉内容。该工具支持多种输出格式,并允许用户自定义样式,适用于多种应用场景。
175 4
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
|
3月前
|
存储 安全 关系型数据库
Blossom:开源私有部署的markdown笔记软件
Blossom 是一款功能强大的开源笔记软件,支持私有部署,可将笔记、图片、个人计划等数据保存在自己的服务器中,并实现实时同步。它还具备动态博客功能,方便记录和分享内容。Blossom 支持多种设备,提供完善的文件管理、快速迁移和丰富的附加功能,是个人知识管理和博客展示的理想选择。
196 7
Blossom:开源私有部署的markdown笔记软件
|
5月前
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
9月前
|
程序员 Linux iOS开发
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
345 1
|
6月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
233 0
|
8月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
162 4

热门文章

最新文章