效果预览：

 访问在线demo

dudu-editor github项目地址：https://github.com/youngchou1997/dudu-editor npm 仓库安装可以：npm i dudu-editor

前言

不算实习，前端从业已经两年了。负责或参与过的平台/项目数量已经有十几个了，这些项目当中，多多少少都需要用到编辑器。

简单的后台form表单中，一个textarea就已经够用，稍微麻烦点的，比如需要能粘进来元素样式的，设置一下元素的 contenteditable="true"也能满足需求。

但是有些项目，比如知识管理（文章编辑）、埋点平台（编辑发送总结邮件）这种，就需要专业的富文本编辑器来进行一定定制来满足需要。

那么，我们要如何选择一个合适的富文本编辑器呢？

众所周知，富文本编辑器有所见即所得的特性，展示实际上需要html源码。

就我自己就用过：

ueditor：百度 fex 的

ckeditor

tiptap

市面上开源的还有：

editor.js

wangeditor

TinyMCE

kindeditor

simditor

Quill

slatejs

prosemirror

真让人眼花缭乱，不过支持 Vue，自带功能足够全面（表格、图片等），支持写插件扩展，很方便就能协同编辑的就只有tiptap了。

tiptap基于prosemirror，用过tiptap V1 的我对其稳定性和丰富的api印象很深刻。

而tiptap V2 则大量改写了 V1 的 api，升级需要花费很多功夫，v1的插件很多都没办法在v2上继续用了，就需要逐一升级一下。

v2也解决了v1很多bug，比如v1，checklist和orderlist或者unorderlist互转就不支持，v2上就解决了这个问题。

另外v2对于多人协同编辑的支持程度也更高，围绕多人编辑有 

@tiptap/extension-collaboration  @tiptap/extension-collaboration-cursor 这两个插件，第一个是多人协作插件，第二个插件就是用来显示协作人的光标，光标有个简单样式user:id这样子，可以自己再定制样式。   既然 tiptap v2 有如此多的优点，那么我们接下来将着手使用tiptap来定制我们自己的富文本编辑器。  

新建组件项目

我们项目名就叫 dudu-editor 吧。 首先创建好项目，配置好webpack、eslint，搭建好项目架子。然后安装如下编辑器的依赖：  

1 npm i @tiptap/vue-2 @tiptap/starter-kit @tiptap/extension-task-list @tiptap/extension-task-item @tiptap/extension-highlight @tiptap/extension-character-count

基于 vue 2 就使用  @tiptap/vue-2 这个依赖，starter-kit 则是包含了很多基本功能，比如 text、bold、italic、header、history 等等插件。

再装一下element-ui组件库。

npm i element-ui

因为我们要用组件库来定制装修编辑器。

接下来在我们创建好的组件仓库的入口vue文件中引入tiptap v2 的套件，并做初始化。

并且应用vue的响应式特性，对数据做一定监听处理。再设计下props，外部引用组件的时候就可以通过v-model双向绑定了。

通过vue.use全局注册之后，接下来，在外部组件就可以使用我们的编辑器了。

本文参考：

tiptap官方文档：https://www.tiptap.dev/installation  

下一篇我们将介绍怎么去为tiptap扩展协同编辑能力。