如何详细学习tui.editor这款功能全面的Markdown编辑器使用案例？

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

目录简介安装使用初始化官方插件功能扩展实现源码简介最近在找一款类似Markdown编辑器，主要用于个人网站。希望找到一款包含以下功能的Markdown编辑器：+ 实时预览+ 语法高亮+ 自动生成目录

目录

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

简介

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

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