如何使用功能强大的Markdown编辑器tui.editor进行高效编辑？

本文共计1670个文字，预计阅读时间需要7分钟。

目录 + 简介 + 安装使用 + 安装 + 初始化 + 官方插件 + 功能拓展 + 实现源码 + 简介 + 最近在饭否自建的个人网站，想找一款类似掘金的Markdown编辑器，主要需求包括：+ 实时预览 + 语法高亮 + 自动生成目录

目录

• 简介
• 安装使用
• 安装
• 初始化
• 官方插件
• 功能拓展
• 实现源码

简介

最近在捯饬自己的个人网站，想找一款类似于掘金的markdown编辑器，主要诉求包含实时预览、语法高亮、自动生成目录索引。对比了市面上主流的几款编辑器，最后采用了@toast-ui/editor。选择的主要原因就是开箱即用，内置一些实用的插件，如表格并且支持合并单元格、语法高亮、图形展示、uml绘制等；支持自定义插件扩展，因为这款编辑器是基于prosemirror，前身即codemirror，编辑器本身是偏底层的，提供了丰富的api供我们自定义开发，这也大大增强了编辑器的灵活性，如果想加一个目录索引，我们完全可以自定义开发一个插件使用。

在初次使用过程中，也遇到一些注意点，本文以vue3为例，简单介绍@toast-ui/editor的使用过程。