基于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"即可。

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值