@mario9/tiptap-editor 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -12
- package/dist/tiptap-editor.css +1 -1
- package/dist/tiptap-editor.js +594 -607
- package/dist/tiptap-editor.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -51,7 +51,7 @@ const content = ref('')
|
|
|
51
51
|
SeparatorFeature,
|
|
52
52
|
TableFeature,
|
|
53
53
|
MathFeature,
|
|
54
|
-
ImageFeature
|
|
54
|
+
ImageFeature,
|
|
55
55
|
]"
|
|
56
56
|
/>
|
|
57
57
|
</template>
|
|
@@ -63,7 +63,7 @@ const content = ref('')
|
|
|
63
63
|
|------|------|--------|------|
|
|
64
64
|
| `modelValue` | `string` | `''` | 编辑器内容（HTML 格式），支持 `v-model` 双向绑定 |
|
|
65
65
|
| `placeholder` | `string` | `'请输入内容...'` | 编辑器占位符文本 |
|
|
66
|
-
| `
|
|
66
|
+
| `upload` | `(file: File) => Promise<string>` | `undefined` | 图片上传函数，传给 `ImageFeature` 使用，不传则默认转为 Base64 |
|
|
67
67
|
| `features` | `FeaturePlugin[]` | `[]` | 功能插件列表，决定工具栏内容和注册的扩展 |
|
|
68
68
|
|
|
69
69
|
## Feature Plugins
|
|
@@ -77,28 +77,29 @@ const content = ref('')
|
|
|
77
77
|
| `CodeBlockFeature` | 代码块（含语法高亮） | `CodeBlockFeature` |
|
|
78
78
|
| `TableFeature` | 表格（含行列增删、移动） | `TableFeature` |
|
|
79
79
|
| `MathFeature` | 数学公式（内联 / 块级，基于 KaTeX） | `MathFeature` |
|
|
80
|
-
| `ImageFeature` | 图片插入（支持自定义上传，默认 Base64） | `ImageFeature
|
|
80
|
+
| `ImageFeature` | 图片插入（支持自定义上传，默认 Base64） | `ImageFeature` |
|
|
81
81
|
| `SeparatorFeature` | 工具栏分隔符 | `SeparatorFeature` |
|
|
82
82
|
|
|
83
|
-
`
|
|
83
|
+
`upload` 通过 `TiptapEditor` 的 `upload` prop 传入，`ImageFeature` 会自动从 context 中读取：
|
|
84
|
+
|
|
85
|
+
```vue
|
|
86
|
+
<TiptapEditor v-model="content" :upload="myUpload" :features="[..., ImageFeature]" />
|
|
87
|
+
```
|
|
84
88
|
|
|
85
89
|
```typescript
|
|
86
|
-
import {
|
|
90
|
+
import { type UploadFn } from '@mario9/tiptap-editor'
|
|
87
91
|
|
|
88
|
-
const
|
|
92
|
+
const myUpload: UploadFn = async (file) => {
|
|
89
93
|
const formData = new FormData()
|
|
90
94
|
formData.append('file', file)
|
|
91
95
|
const res = await fetch('/api/upload', { method: 'POST', body: formData })
|
|
92
96
|
const data = await res.json()
|
|
93
97
|
return data.url
|
|
94
98
|
}
|
|
95
|
-
|
|
96
|
-
// 不传则默认转为 Base64
|
|
97
|
-
ImageFeature()
|
|
98
|
-
// 传入自定义上传函数
|
|
99
|
-
ImageFeature(upload)
|
|
100
99
|
```
|
|
101
100
|
|
|
101
|
+
不传 `upload` 时图片默认转为 Base64。
|
|
102
|
+
|
|
102
103
|
## 自定义 Feature Plugin
|
|
103
104
|
|
|
104
105
|
实现 `FeaturePlugin` 接口即可创建自定义功能插件：
|
|
@@ -117,7 +118,7 @@ export const MyFeature: FeaturePlugin = {
|
|
|
117
118
|
}
|
|
118
119
|
```
|
|
119
120
|
|
|
120
|
-
`install()` 接收 `PluginInstallContext`（含 `readonly
|
|
121
|
+
`install()` 接收 `PluginInstallContext`（含 `readonly`、`provide`、`upload`），返回 `{ extensions, controlComponent? }`。
|
|
121
122
|
|
|
122
123
|
## 内置功能（始终启用）
|
|
123
124
|
|