neweditor 1.0.0 → 1.2.0

package/README.md

@@ -7,7 +7,9 @@
 - ✅ 完整的富文本编辑功能
 - ✅ 支持 40+ 种编程语言语法高亮
 - ✅ Slash Command（斜杠命令）快捷操作
-- ✅ 图片粘贴功能（Ctrl+V）
+- ✅ 图片粘贴上传（Ctrl+V）
+- ✅ 文件拖拽上传（图片、视频、音频）
+- ✅ 自动上传到服务器（支持自定义上传处理器）
 - ✅ 拖拽排序功能
 - ✅ 表格编辑（合并单元格、调整列宽等）
 - ✅ 多语言支持（中文/英文）
@@ -17,11 +19,11 @@
 ## 安装
 
 ```bash
-npm install testfox-richtext-editor
+npm install neweditor
 # 或
-pnpm install testfox-richtext-editor
+pnpm install neweditor
 # 或
-yarn add testfox-richtext-editor
+yarn add neweditor
 ```
 
 ## 使用
@@ -34,8 +36,8 @@ yarn add testfox-richtext-editor
 </template>
 
 <script setup>
-import { useEditor, RichTextEditor, allExtensions } from 'testfox-richtext-editor'
-import 'testfox-richtext-editor/dist/style.css'
+import { useEditor, RichTextEditor, allExtensions } from 'neweditor'
+import 'neweditor/dist/style.css'
 
 const editor = useEditor({
   extensions: allExtensions,
@@ -59,8 +61,8 @@ const editor = useEditor({
 
 <script setup>
 import { ref } from 'vue'
-import { useEditor, RichTextEditor, allExtensions } from 'testfox-richtext-editor'
-import 'testfox-richtext-editor/dist/style.css'
+import { useEditor, RichTextEditor, allExtensions } from 'neweditor'
+import 'neweditor/dist/style.css'
 
 const content = ref('<p>初始内容</p>')
 
@@ -94,6 +96,90 @@ const editor = useEditor({
 </style>
 ```
 
+### 带文件上传功能的示例
+
+```vue
+<template>
+  <div class="editor-wrapper">
+    <RichTextEditor 
+      :editor="editor" 
+      locale="zh-CN"
+      class="my-editor"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useEditor, RichTextEditor, allExtensions } from 'testfox-richtext-editor'
+import 'testfox-richtext-editor/dist/style.css'
+
+const content = ref('<p>初始内容</p>')
+
+// 自定义文件上传处理器
+const handleFileUpload = async (file) => {
+  try {
+    // 1. 验证文件大小（例如限制 100MB）
+    const maxSize = 100 * 1024 * 1024
+    if (file.size > maxSize) {
+      console.error('文件大小不能超过100MB')
+      return null
+    }
+
+    // 2. 创建 FormData
+    const formData = new FormData()
+    formData.append('file', file)
+
+    // 3. 调用你的上传 API
+    const response = await fetch('/api/upload', {
+      method: 'POST',
+      body: formData,
+    })
+
+    const result = await response.json()
+
+    // 4. 返回文件 URL（成功）或 null（失败）
+    if (result.success) {
+      return result.fileUrl  // 返回文件的访问 URL
+    } else {
+      console.error('上传失败:', result.message)
+      return null
+    }
+  } catch (error) {
+    console.error('上传异常:', error)
+    return null
+  }
+}
+
+// 配置扩展并传递上传处理器
+const configuredExtensions = allExtensions.map(ext => {
+  // 为图片、视频、音频扩展配置上传处理器
+  if (ext.name === 'image' || ext.name === 'video' || ext.name === 'audio') {
+    return ext.configure({
+      uploadHandler: handleFileUpload
+    })
+  }
+  return ext
+})
+
+const editor = useEditor({
+  extensions: configuredExtensions,  // 使用配置好的扩展
+  content: content.value,
+  editable: true,
+  onUpdate: ({ editor }) => {
+    content.value = editor.getHTML()
+  },
+})
+</script>
+
+<style>
+.editor-wrapper {
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+</style>
+```
+
 ## API
 
 ### useEditor(options)
@@ -120,6 +206,84 @@ interface EditorOptions {
 
 返回一个响应式的编辑器实例。
 
+### 文件上传配置
+
+#### uploadHandler
+
+文件上传处理器函数，用于处理图片、视频、音频的上传。
+
+**类型签名：**
+
+```typescript
+type UploadHandler = (file: File) => Promise<string | null>
+```
+
+**参数：**
+- `file`: File 对象，包含要上传的文件
+
+**返回值：**
+- 成功：返回文件的访问 URL（字符串）
+- 失败：返回 `null`
+
+**配置方式：**
+
+```javascript
+// 为需要上传功能的扩展配置 uploadHandler
+const configuredExtensions = allExtensions.map(ext => {
+  if (ext.name === 'image' || ext.name === 'video' || ext.name === 'audio') {
+    return ext.configure({
+      uploadHandler: async (file) => {
+        // 你的上传逻辑
+        const url = await uploadToServer(file)
+        return url  // 返回 URL 或 null
+      }
+    })
+  }
+  return ext
+})
+```
+
+**工作流程：**
+
+1. 用户粘贴图片或拖拽文件到编辑器
+2. 编辑器创建临时预览（Blob URL）
+3. 立即显示预览，用户无需等待
+4. 后台调用 `uploadHandler` 上传文件
+5. 上传成功后，自动替换为真实 URL
+6. 上传失败则删除临时预览
+
+**示例实现：**
+
+```javascript
+const handleFileUpload = async (file) => {
+  try {
+    // 验证文件大小
+    const maxSize = 100 * 1024 * 1024  // 100MB
+    if (file.size > maxSize) {
+      console.error('文件过大')
+      return null
+    }
+
+    // 上传到服务器
+    const formData = new FormData()
+    formData.append('file', file)
+
+    const response = await fetch('/api/upload', {
+      method: 'POST',
+      body: formData,
+    })
+
+    const result = await response.json()
+
+    // 返回文件 URL
+    return result.success ? result.fileUrl : null
+  } catch (error) {
+    console.error('上传失败:', error)
+    return null
+  }
+}
+```
+
 ### RichTextEditor 组件
 
 编辑器 UI 组件。
@@ -173,9 +337,9 @@ interface EditorOptions {
 - 代码块（支持 40+ 种语言语法高亮）
 
 ### 媒体内容
-- 图片（支持粘贴、拖拽调整大小）
-- 视频
-- 音频
+- 图片（支持粘贴、拖拽上传、调整大小）
+- 视频（支持拖拽上传）
+- 音频（支持拖拽上传）
 - iframe
 
 ### 表格
@@ -280,6 +444,234 @@ npm run typecheck
 - [Slash Command 指南](./docs/slash-command-guide.md)
 - [Slash Command 示例](./docs/slash-command-examples.md)
 
+## 文件上传功能
+
+### 功能特性
+
+编辑器支持以下文件上传方式：
+
+- ✅ **图片粘贴上传**：按 `Ctrl+V` 粘贴图片，自动上传
+- ✅ **图片拖拽上传**：拖拽图片文件到编辑器
+- ✅ **视频拖拽上传**：拖拽视频文件到编辑器
+- ✅ **音频拖拽上传**：拖拽音频文件到编辑器
+- ✅ **即时预览**：上传前立即显示预览
+- ✅ **自动替换**：上传成功后自动替换为真实 URL
+- ✅ **失败处理**：上传失败自动删除预览
+
+### 支持的文件类型
+
+| 类型 | 扩展名 | 操作方式 |
+|------|--------|---------|
+| 图片 | jpg, jpeg, png, gif, webp, svg, bmp | 粘贴、拖拽 |
+| 视频 | mp4, webm, ogg | 拖拽 |
+| 音频 | mp3, wav, ogg | 拖拽 |
+
+### 实现步骤
+
+#### 1. 定义上传处理器
+
+```javascript
+const handleFileUpload = async (file) => {
+  try {
+    // 验证文件大小
+    const maxSize = 100 * 1024 * 1024  // 100MB
+    if (file.size > maxSize) {
+      console.error('文件大小不能超过100MB')
+      return null
+    }
+
+    // 创建 FormData
+    const formData = new FormData()
+    formData.append('file', file)
+
+    // 调用上传 API
+    const response = await fetch('/api/upload', {
+      method: 'POST',
+      body: formData,
+    })
+
+    const result = await response.json()
+
+    // 返回文件 URL（成功）或 null（失败）
+    if (result.success) {
+      return result.fileUrl
+    } else {
+      console.error('上传失败:', result.message)
+      return null
+    }
+  } catch (error) {
+    console.error('上传异常:', error)
+    return null
+  }
+}
+```
+
+#### 2. 配置扩展
+
+```javascript
+import { allExtensions } from 'testfox-richtext-editor'
+
+// 为需要上传功能的扩展配置 uploadHandler
+const configuredExtensions = allExtensions.map(ext => {
+  if (ext.name === 'image' || ext.name === 'video' || ext.name === 'audio') {
+    return ext.configure({
+      uploadHandler: handleFileUpload
+    })
+  }
+  return ext
+})
+```
+
+#### 3. 创建编辑器
+
+```javascript
+const editor = useEditor({
+  extensions: configuredExtensions,  // 使用配置好的扩展
+  content: '<p>Hello World!</p>',
+})
+```
+
+### 完整示例
+
+```vue
+<template>
+  <RichTextEditor :editor="editor" locale="zh-CN" />
+</template>
+
+<script setup>
+import { useEditor, RichTextEditor, allExtensions } from 'testfox-richtext-editor'
+import 'testfox-richtext-editor/dist/style.css'
+
+// 上传处理器
+const handleFileUpload = async (file) => {
+  try {
+    const maxSize = 100 * 1024 * 1024
+    if (file.size > maxSize) {
+      alert('文件大小不能超过100MB')
+      return null
+    }
+
+    const formData = new FormData()
+    formData.append('file', file)
+
+    const response = await fetch('/api/upload', {
+      method: 'POST',
+      body: formData,
+    })
+
+    const result = await response.json()
+    return result.success ? result.fileUrl : null
+  } catch (error) {
+    console.error('上传失败:', error)
+    return null
+  }
+}
+
+// 配置扩展
+const configuredExtensions = allExtensions.map(ext => {
+  if (ext.name === 'image' || ext.name === 'video' || ext.name === 'audio') {
+    return ext.configure({ uploadHandler: handleFileUpload })
+  }
+  return ext
+})
+
+// 创建编辑器
+const editor = useEditor({
+  extensions: configuredExtensions,
+  content: '<p>试试粘贴图片或拖拽文件到这里...</p>',
+})
+</script>
+```
+
+### 上传流程
+
+```
+1. 用户粘贴图片或拖拽文件
+   ↓
+2. 创建临时预览（Blob URL）
+   ↓
+3. 立即显示预览（用户无需等待）
+   ↓
+4. 后台调用 uploadHandler 上传
+   ↓
+5. 上传成功
+   ├─ 替换为真实 URL
+   └─ 释放临时 Blob URL
+   ↓
+6. 上传失败
+   ├─ 删除临时预览
+   └─ 释放临时 Blob URL
+```
+
+### 注意事项
+
+1. **返回值约定**
+   - 成功：必须返回文件的完整访问 URL（字符串）
+   - 失败：必须返回 `null`
+
+2. **文件大小限制**
+   - 建议在前端验证文件大小
+   - 避免上传超大文件导致失败
+
+3. **错误处理**
+   - 捕获所有异常并返回 `null`
+   - 提供友好的错误提示
+
+4. **URL 格式**
+   - 返回的 URL 必须是可访问的完整 URL
+   - 例如：`https://example.com/uploads/image.jpg`
+
+5. **异步处理**
+   - uploadHandler 必须是异步函数
+   - 使用 `async/await` 或返回 Promise
+
+### 常见问题
+
+**Q: 粘贴后图片消失了？**
+
+A: 检查 uploadHandler 是否返回了正确的 URL。如果返回 `null`，图片会被删除。
+
+**Q: 如何禁用上传功能？**
+
+A: 不配置 uploadHandler 即可。图片会保持为 Blob URL（仅本地预览）。
+
+**Q: 支持哪些文件类型？**
+
+A: 图片（粘贴+拖拽）、视频（拖拽）、音频（拖拽）。可以通过扩展支持更多类型。
+
+**Q: 如何自定义文件大小限制？**
+
+A: 在 uploadHandler 中添加验证逻辑：
+
+```javascript
+const maxSize = 50 * 1024 * 1024  // 50MB
+if (file.size > maxSize) {
+  alert('文件过大')
+  return null
+}
+```
+
+**Q: 如何添加上传进度提示？**
+
+A: 在 uploadHandler 中使用 UI 库显示进度：
+
+```javascript
+const handleFileUpload = async (file) => {
+  // 显示加载提示
+  showLoading('正在上传...')
+  
+  try {
+    const url = await uploadToServer(file)
+    hideLoading()
+    return url
+  } catch (error) {
+    hideLoading()
+    showError('上传失败')
+    return null
+  }
+}
+```
+
 ## 浏览器兼容性
 
 - Chrome/Edge: ✅ 完全支持

package/dist/extensions/audio/AudioView.vue.d.ts

@@ -1,5 +1,6 @@
 import { NodeViewProps } from '../../tiptap/vue-3';
 declare const _default: import('vue').DefineComponent<NodeViewProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    inputRef: HTMLInputElement;
+    fileInputRef: HTMLInputElement;
+    linkInputRef: HTMLInputElement;
 }, any>;
 export default _default;

package/dist/extensions/image/ImagePreview.vue.d.ts

@@ -0,0 +1,17 @@
+interface ImageInfo {
+    src: string;
+    alt?: string;
+}
+type __VLS_Props = {
+    visible: boolean;
+    images: ImageInfo[];
+    current: number;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:visible": (value: boolean) => any;
+    "update:current": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:visible"?: ((value: boolean) => any) | undefined;
+    "onUpdate:current"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/extensions/video/VideoView.vue.d.ts

@@ -1,5 +1,6 @@
 import { NodeViewProps } from '../../tiptap/vue-3';
 declare const _default: import('vue').DefineComponent<NodeViewProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    inputRef: HTMLInputElement;
+    fileInputRef: HTMLInputElement;
+    linkInputRef: HTMLInputElement;
 }, any>;
 export default _default;