基于vue的tiptap编辑器插件（一）

 前言

        最近在重构我的vue项目，发现vue-quill-editor这个插件的自定义配置有些局限，我也不是很懂，然后去查的时候发现，这个插件已经没有团队在维护了，这个插件是基于quill的，我如果要了解内部细节，肯定是要把quill的相关文档看一遍，但是已经有新的替代品了，那就是tiptap，不仅有团队维护，而且文档全面详细，既然我都是要从头看文档，为何不看新的呢，所以我选择学会使用tiptap，然后把原来的quill-editor替代掉。

介绍

        tiptap是一个基于ProMirror(一个用于创建web端的富文本编辑器的工具包)的编辑器。（tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors.）

        headless是什么意思？

        headless表示没有提供内置的UI，您完全可以自由地构建你想要的界面。(There is no provided user interface, you are absolutely free to build whatever interface you want.)

        注意，tiptap的文档的服务器不在国内，所以想要看的小伙伴需要自己想办法。

安装

        在你的现有的vue项目中，通过npm添加以下两个包(以vue2举例)：

        npm install @tiptap/vue-2 @tiptap/starter-kit

        在components目录下新建一个Tiptap.vue，写入以下内容

<template>
  <editor-content :editor="editor" />
</template>

<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import StarterKit from '@tiptap/starter-kit'

export default {
  components: {
    EditorContent,
  },

  data() {
    return {
      editor: null,
    }
  },

  mounted() {
    this.editor = new Editor({
      content: '<p>I’m running Tiptap with Vue.js. </p>',
      extensions: [
        StarterKit,
      ],
    })
  },

  beforeDestroy() {
    this.editor.destroy()
  },
}
</script>

        在你想要的地方局部注册并使用Tiptap组件，比如我想在app.vue中使用：

<template>
  <div id="app">
   <tiptap  />
  </div>
</template>

<script>
import Tiptap from './components/Tiptap.vue';

export default {
  name: 'App',
  components: {
    Tiptap
  },
  data() {
    return {
      content:''
    }
  },
}
</script>

在控制台窗口中输入命令npm run serve启动看看效果。没报错的话你会看到一个与text类型的input相似的输入框。
拓展（可选）

        如果你想立即给该组件进行数据双向绑定，你可以这么做，首先在Tiptap.vue中，代码修改后如下

<template>
  <editor-content :editor="editor" />
</template>

<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import StarterKit from '@tiptap/starter-kit'

export default {
  components: {
    EditorContent,
  },

  props: {
    value: {
      type: String,
      default: '',
    },
  },

  data() {
    return {
      editor: null,
    }
  },

  watch: {
    value(value) {
      // HTML
      const isSame = this.editor.getHTML() === value

      // JSON
      // const isSame = JSON.stringify(this.editor.getJSON()) === JSON.stringify(value)

      if (isSame) {
        return
      }

      this.editor.commands.setContent(value, false)
    },
  },

  mounted() {
    this.editor = new Editor({
      content: this.value,
      extensions: [
        StarterKit,
      ],
      onUpdate: () => {
        // HTML
        this.$emit('input', this.editor.getHTML())

        // JSON
        // this.$emit('input', this.editor.getJSON())
      },
    })
  },

  beforeDestroy() {
    this.editor.destroy()
  },
}
</script>

在App.vue中，给tip-tap标签添加v-model="content"即可。