Rich Editor

一个基于 Tiptap 的富文本编辑器，具有丰富的文本编辑功能。

功能特性

• 基础文本格式化：加粗、斜体、下划线、删除线
• 标题设置
• 字体大小调整
• 颜色设置（文字颜色、背景高亮）
• 行高和缩进控制
• 对齐方式
• 列表（有序和无序）及样式
• 引用块
• 链接
• 待办事项
• 代码块
• 分割线
• 图片上传功能

快速开始

安装依赖：

npm i @srcker/editor-vue-next

使用方法：

# 引入组件
import { RichEditor } from '@srcker/editor-vue-next'
# 引入样式
import '@srcker/editor-vue-next/style/toolbar'
import '@srcker/editor-vue-next/style/content'

# 使用组件
<RichEditor v-model="form.content" theme="dark" format="html" />

参数说明

配置项

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | theme | 主题，可选值：light、dark | string | light | | format | 输出格式，可选值：html、json | string | html | | uploadImage | 图片上传配置 | File | - |

图片上传配置

const uploadImage = async (file: File) => {
    console.log(file)
    return {
        url: '图片地址',
        name: '图片名称'
    }
}

技术栈

• Vue 3
• Tiptap
• SCSS

图片上传

编辑器支持通过工具栏按钮上传图片，支持常见的图片格式（JPG、PNG、GIF、WebP），最大支持5MB的文件。