Rich Editor

一个基于 Tiptap 的富文本编辑器，具有丰富的文本编辑功能，支持多种格式化选项和图片上传。

功能特性

• 基础文本格式化：加粗、斜体、下划线、删除线
• 标题设置：支持 H1-H5 标题
• 字体大小调整：多种字体大小选项
• 颜色设置：文字颜色和背景高亮
• 行高和缩进控制：灵活的段落格式调整
• 对齐方式：左对齐、居中对齐、右对齐
• 列表：有序列表、无序列表、任务列表
• 引用块：支持文本引用
• 链接：插入和管理超链接
• 代码：行内代码和代码块
• 图片上传：支持本地图片上传
• 主题切换：支持浅色和深色主题
• 撤销/重做：编辑历史操作
• 清除格式：快速清除文本格式

快速开始

安装依赖

npm i @srcker/editor-vue-next

使用方法

<template>
  <div>
    <RichEditor 
      v-model="content" 
      theme="light" 
      format="html"
      :uploadImage="uploadImage"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { RichEditor } from '@srcker/editor-vue-next'
import '@srcker/editor-vue-next/style/toolbar'
import '@srcker/editor-vue-next/style/content'

const content = ref('<p>Hello Rich Editor!</p>')

// 自定义图片上传函数
const uploadImage = async (file) => {
  // 这里实现你的图片上传逻辑
  // 示例：返回图片的URL和名称
  return {
    url: 'https://example.com/image.jpg',
    name: file.name
  }
}
</script>

配置项

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | v-model | 编辑器内容 | string | - | | theme | 主题，可选值：light、dark | string | light | | format | 输出格式，可选值：html、json、text | string | html | | height | 编辑器高度（像素） | number | 500 | | toolbar | 自定义工具栏配置 | ToolbarConfig | 完整工具栏 | | uploadImage | 图片上传函数 | (file: File) => Promise<{url: string, name: string}> | 内置Base64转换 |

工具栏配置

可以通过 toolbar 属性自定义工具栏按钮和布局：

// 示例：自定义工具栏
const customToolbar = [
  ['undo', 'redo', 'format'],
  ['heading', 'fontSize'],
  ['bold', 'italic', 'underline', 'strike'],
  ['alignLeft', 'alignCenter', 'alignRight'],
  ['bulletList', 'orderedList', 'taskList'],
  ['link', 'image']
]

图片上传

编辑器支持通过工具栏按钮上传图片，默认使用 Base64 编码处理图片。你可以通过 uploadImage 属性自定义上传逻辑，例如上传到服务器：

const uploadImage = async (file) => {
  // 实现你的上传逻辑
  const formData = new FormData()
  formData.append('image', file)
  
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData
  })
  
  const data = await response.json()
  return {
    url: data.url,
    name: file.name
  }
}

技术栈

• Vue 3 + Composition API
• Tiptap（富文本编辑器核心）
• SCSS（样式管理）
• Vite（构建工具）

浏览器兼容性

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

许可证

个人使用

• 免费：个人学习、个人项目开发等完全免费 企业需要购买授权后使用

商业使用

• 需要购买授权：任何商业用途（包括但不限于企业内部使用、产品集成、SaaS服务等）都需要购买商业授权
• 授权方式：联系作者 [email protected] 获取商业授权详情

其他条款

• 不得修改源码后重新分发
• 不得将本项目作为竞品直接销售
• 保留版权声明和许可证信息