安装

npm install dacong-tiptap@latest

使用

<script setup>
import { DcEditor } from 'dacong-tiptap'
import 'dacong-tiptap/style.css'
const content = '每天快乐🎈'
</script>
<template>
  <DcEditor :content="content" />
</template>

Props

{
    content:'', //String 编辑器的内容
    slash:'', //Array / 命令弹出的数组
    isDark:'', //Boolean 是否为暗色模式
    addList:'', //Array 自定义添加列表
}

/*
默认 slash 为以下内容，自定义会覆盖默认内容
const slash = [
  {
    title: '普通文本',
    icon: 'mdi:format-paragraph',
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).setNode('paragraph').run()
    }
  }
]

默认 addList 为空，需自定义，格式如下
onst addList = [
  {
    title: '图片',
    icon: 'ri:image-2-line',
    command: editor => {
      editor.chain().focus().setImage({ src: '' }).run()
    }
  }
]
*/

Emits

{
    save(content), //Fun 保存回调
    close(), //Fun 编辑器关闭事件
    fileSelect({currentEditor, files, pos}), //Fun 文件选择回调，可自行处理文件
}

注意事项

1. 此项目依赖 tailwindcss 所以你的项目应该引入它，这个包没有内部引入是因为会起冲突
2. 你需要在 tailwind.config.js 中的 content 中加入 node_modules/dacong-tiptap/main.js
3. 您需要手动引入 style.css 这么做，是为了在展示富文本内容的时候，也能够通过引入样式，实现样式统一