popdo-tiptap v0.1.7

popdo-tiptap

一个基于tiptap2+vue3封装的富文本编辑器

Install

npm i popdo-tiptap

Usage

全局安装

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import Tiptap from './index'

const app = createApp(App)
app.use(Tiptap)
app.mount('#app')

组件内单独引入

<template>
  <Tiptap v-model="content" editable/>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Tiptap } from "popdo-tiptap";
import "../node-modules/popdo-tiptap/dist/style.css";

const content = ref("");
</script>

默认是不引入主题样式的，因此你需要自己引入主题样式或者根据主题css变量自定义主题样式， 内置了3个主题，分别是prose-theme、prose-element、prose-arco

// default theme
import "../node-modules/popdo-tiptap/src/assets/prose-theme.scss";
// element-ui theme
import "../node-modules/popdo-tiptap/src/assets/prose-element.scss";
// arco-ui theme
import "../node-modules/popdo-tiptap/src/assets/prose-arco.scss";

同时需要在你的Tiptap组件上添加theme属性，值为你引入的主题样式的类名

<Tiptap v-model="content" editable theme="prose-element"/>

API

Props

License

MIT