@srcker/editor-vue-next 1.2.0 → 1.2.2

package/README.md

@@ -1,71 +1,141 @@
 # Rich Editor
 
-一个基于 Tiptap 的富文本编辑器，具有丰富的文本编辑功能。
+一个基于 Tiptap 的富文本编辑器，具有丰富的文本编辑功能，支持多种格式化选项和图片上传。
+
+![Rich Editor Screenshot](./public/images/editor-screenshot.png)
 
 ## 功能特性
 
-- 基础文本格式化：加粗、斜体、下划线、删除线
-- 标题设置
-- 字体大小调整
-- 颜色设置（文字颜色、背景高亮）
-- 行高和缩进控制
-- 对齐方式
-- 列表（有序和无序）及样式
-- 引用块
-- 链接
-- 待办事项
-- 代码块
-- 分割线
-- **图片上传功能**
+- **基础文本格式化**：加粗、斜体、下划线、删除线
+- **标题设置**：支持 H1-H5 标题
+- **字体大小调整**：多种字体大小选项
+- **颜色设置**：文字颜色和背景高亮
+- **行高和缩进控制**：灵活的段落格式调整
+- **对齐方式**：左对齐、居中对齐、右对齐
+- **列表**：有序列表、无序列表、任务列表
+- **引用块**：支持文本引用
+- **链接**：插入和管理超链接
+- **代码**：行内代码和代码块
+- **图片上传**：支持本地图片上传
+- **主题切换**：支持浅色和深色主题
+- **撤销/重做**：编辑历史操作
+- **清除格式**：快速清除文本格式
 
 ## 快速开始
 
-安装依赖：
+### 安装依赖
 
 ```bash
 npm i @srcker/editor-vue-next
 ```
 
-使用方法：
-
-```bash
-
-# 引入组件
+### 使用方法
+
+```vue
+<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'
 
-# 使用组件
-<RichEditor v-model="form.content" theme="dark" format="html" />
+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` | string | `html` |
-| uploadImage | 图片上传配置 | File | - |
-
-## 图片上传配置
+| format | 输出格式，可选值：`html`、`json`、`text` | string | `html` |
+| height | 编辑器高度（像素） | number | 500 |
+| toolbar | 自定义工具栏配置 | ToolbarConfig | 完整工具栏 |
+| uploadImage | 图片上传函数 | (file: File) => Promise<{url: string, name: string}> | 内置Base64转换 |
+
+## 工具栏配置
+
+可以通过 `toolbar` 属性自定义工具栏按钮和布局：
+
+```javascript
+// 示例：自定义工具栏
+const customToolbar = [
+  ['undo', 'redo', 'format'],
+  ['heading', 'fontSize'],
+  ['bold', 'italic', 'underline', 'strike'],
+  ['alignLeft', 'alignCenter', 'alignRight'],
+  ['bulletList', 'orderedList', 'taskList'],
+  ['link', 'image']
+]
 ```
-const uploadImage = async (file: File) => {
-    console.log(file)
-    return {
-        url: '图片地址',
-        name: '图片名称'
-    }
+
+## 图片上传
+
+编辑器支持通过工具栏按钮上传图片，默认使用 Base64 编码处理图片。你可以通过 `uploadImage` 属性自定义上传逻辑，例如上传到服务器：
+
+```javascript
+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
-- Tiptap
-- SCSS
+- Vue 3 + Composition API
+- Tiptap（富文本编辑器核心）
+- SCSS（样式管理）
+- Vite（构建工具）
 
-## 图片上传
-编辑器支持通过工具栏按钮上传图片，支持常见的图片格式（JPG、PNG、GIF、WebP），最大支持5MB的文件。
+## 浏览器兼容性
+
+- Chrome/Edge 90+
+- Firefox 88+
+- Safari 14+
+
+## 许可证
+
+### 个人使用
+- **免费**：个人学习、个人项目开发等完全免费 企业需要购买授权后使用
+
+### 商业使用
+- **需要购买授权**：任何商业用途（包括但不限于企业内部使用、产品集成、SaaS服务等）都需要购买商业授权
+- **授权方式**：联系作者 sinda@srcker.com 获取商业授权详情
+
+### 其他条款
+- 不得修改源码后重新分发
+- 不得将本项目作为竞品直接销售
+- 保留版权声明和许可证信息