antdv-next-tiptap 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.
Files changed (4) hide show
  1. package/README.md +141 -153
  2. package/dist/index.mjs +1003 -565
  3. package/dist/index.mjs.map +1 -1
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -1,145 +1,153 @@
1
1
  <p align="center">
2
- <img alt="npm" src="https://img.shields.io/npm/v/antdv-next-tiptap">
3
- <img alt="npm peer dependency version" src="https://img.shields.io/badge/vue-%5E3.0.0-vue">
4
- <img alt="GitHub" src="https://img.shields.io/github/license/pengyinghao/antdv-next-tiptap">
2
+ <img src="https://img.shields.io/badge/Antdv%20Next-Tiptap-1677ff?style=for-the-badge&logo=antdesign&logoColor=white" alt="Antdv Next Tiptap" />
5
3
  </p>
6
4
 
7
- <h3 align="center">Antdv Next Tiptap 富文本编辑器</h3>
5
+ <h1 align="center">Antdv Next Tiptap</h1>
8
6
 
9
- <p align="center"><strong>现代化、轻量级、易扩展的 Vue 3 富文本编辑器</strong></p>
7
+ <p align="center">
8
+ 基于 Vue 3、Tiptap 和 Antdv Next 的富文本编辑器组件。
9
+ </p>
10
10
 
11
- 基于 [Tiptap](https://github.com/ueberdosis/tiptap) 和 [antdv-next](https://github.com/antdv-next/antdv-next) 为 Vue 3 打造的现代化富文本编辑器，专为构建高质量内容管理系统而设计。
11
+ <p align="center">
12
+ <a href="https://www.npmjs.com/package/antdv-next-tiptap">
13
+ <img src="https://img.shields.io/npm/v/antdv-next-tiptap?color=1677ff&label=npm&logo=npm" alt="npm version" />
14
+ </a>
15
+ <a href="https://www.npmjs.com/package/antdv-next-tiptap">
16
+ <img src="https://img.shields.io/npm/dm/antdv-next-tiptap?color=52c41a&label=downloads" alt="npm downloads" />
17
+ </a>
18
+ <a href="./LICENSE">
19
+ <img src="https://img.shields.io/badge/license-MIT-13c2c2" alt="MIT license" />
20
+ </a>
21
+ <img src="https://img.shields.io/badge/Vue-3-42b883?logo=vuedotjs&logoColor=white" alt="Vue 3" />
22
+ <img src="https://img.shields.io/badge/TypeScript-ready-3178c6?logo=typescript&logoColor=white" alt="TypeScript ready" />
23
+ </p>
12
24
 
13
- ### ✨ 核心特色
25
+ ## 简介
14
26
 
15
- - **🔌 插件化架构** - 20+ 开箱即用的扩展插件，可按需启用
16
- - **🎨 精美 UI** - 深度集成 Ant Design Vue，符合现代交互规范
17
- - **📱 响应式设计** - 支持多端自适应，移动友好
18
- - **⚡ 高性能** - 基于现代编辑器框架，流畅的编辑体验
19
- - **🔧 高度可定制** - 灵活的插件配置和内容输出格式
20
- - **📝 多格式支持** - 支持 HTML 和 JSON 内容输出
21
- - **🖼️ 媒体处理** - 完善的图片、视频上传机制
22
- - **🎯 TypeScript** - 完整的类型定义，更好的开发体验
27
+ `antdv-next-tiptap` 是一个面向 Vue 3 项目的所见即所得富文本编辑器。它将 Tiptap 的可扩展编辑能力和 Antdv Next 的交互组件整合在一起，适合内容管理、后台表单、知识库编辑、公告发布等需要稳定编辑体验的场景。
23
28
 
24
- ### 🎯 设计理念
29
+ ## 特性
25
30
 
26
- 为 Vue 3 开发者提供最优雅、最易用的富文本编辑解决方案，让内容创作与编辑变得简单而愉快。
31
+ | 能力 | 说明 |
32
+ | ------------- | -------------------------------------------------------------------------- |
33
+ | 插件化扩展 | 内置标题、字体、颜色、列表、代码块、表格、图片、视频、全屏、打印等常用能力 |
34
+ | Antdv Next UI | 工具栏、弹窗、下拉菜单等交互控件与 Antdv Next 体系保持一致 |
35
+ | TypeScript | 暴露 `TiptapProps`、`PluginName`、`OutputFormat` 等类型 |
36
+ | 内容格式 | 支持 HTML 字符串和 Tiptap JSON 文档格式输出 |
37
+ | 媒体上传 | 图片支持上传函数或 base64 内嵌；视频支持地址嵌入和自定义上传 |
38
+ | 字符计数 | 支持仅展示计数，也支持配置最大字符数 |
39
+ | 只读模式 | 可通过 `editable` 控制编辑器是否允许输入 |
27
40
 
28
- ## 📦 安装
41
+ ## 安装
29
42
 
30
- ```shell
31
- pnpm add antdv-next-tiptap
43
+ ```bash
44
+ pnpm add antdv-next-tiptap antdv-next vue
32
45
  ```
33
46
 
34
- ```shell
35
- npm install antdv-next-tiptap
47
+ 也可以使用 npm：
48
+
49
+ ```bash
50
+ npm install antdv-next-tiptap antdv-next vue
36
51
  ```
37
52
 
38
- #### 全局注册
53
+ ## 快速开始
39
54
 
40
- ```js
55
+ ### 全局注册
56
+
57
+ ```ts
41
58
  import { createApp } from 'vue'
42
- import App from './App.vue'
43
59
  import AntdvNext from 'antdv-next'
44
60
  import AntdvNextTiptap from 'antdv-next-tiptap'
45
61
  import 'antdv-next-tiptap/index.css'
62
+ import App from './App.vue'
46
63
 
47
64
  const app = createApp(App)
48
65
 
49
66
  app.use(AntdvNext)
50
67
  app.use(AntdvNextTiptap)
51
- // 全局可直接使用 <Tiptap>
52
68
 
53
69
  app.mount('#app')
54
70
  ```
55
71
 
56
- #### 按需引入
72
+ 注册后可以直接使用：
57
73
 
58
74
  ```vue
59
75
  <template>
60
- <Tiptap v-model="content" />
76
+ <Tiptap v-model="content" :height="420" />
61
77
  </template>
62
78
 
63
- <script setup>
64
- import { Tiptap } from 'antdv-next-tiptap'
65
- import 'antdv-next-tiptap/index.css'
79
+ <script setup lang="ts">
80
+ import { ref } from 'vue'
81
+
82
+ const content = ref('<h2>欢迎使用 Antdv Next Tiptap</h2><p>开始编辑内容。</p>')
66
83
  </script>
67
84
  ```
68
85
 
69
- ## 🚀 基本用法
86
+ ### 按需引入
70
87
 
71
88
  ```vue
72
89
  <template>
73
- <Tiptap v-model="content" :height="400" />
90
+ <Tiptap v-model="content" :height="420" />
74
91
  </template>
75
92
 
76
- <script setup>
93
+ <script setup lang="ts">
77
94
  import { ref } from 'vue'
78
95
  import { Tiptap } from 'antdv-next-tiptap'
79
96
  import 'antdv-next-tiptap/index.css'
80
97
 
81
- const content = ref('<h1>标题</h1><p>这个编辑器很棒！</p>')
98
+ const content = ref('')
82
99
  </script>
83
100
  ```
84
101
 
85
- ## 📔 Props
86
-
87
- ### `modelValue`
88
-
89
- 类型：`string`
90
-
91
- 默认值：`''`
92
-
93
- 编辑器内容，配合 `v-model` 使用。
94
-
95
- ### `height`
96
-
97
- 类型：`number`
102
+ ## API
98
103
 
99
- 默认值：`300`
104
+ ### Props
100
105
 
101
- 内容区域高度，单位为像素。
106
+ | 参数 | 类型 | 默认值 | 说明 |
107
+ | ----------------- | ------------------ | ----------- | ---------------------------------------------- |
108
+ | `modelValue` | `string` | `''` | 编辑器内容，配合 `v-model` 使用 |
109
+ | `height` | `number` | `300` | 内容区域高度，单位为 px |
110
+ | `editable` | `boolean` | `true` | 是否允许编辑 |
111
+ | `outputFormat` | `'html' \| 'json'` | `'html'` | `modelValue` 的输出格式 |
112
+ | `disabledPlugins` | `PluginName[]` | `[]` | 需要禁用的插件名称列表 |
113
+ | `uploadImage` | `UploadFn` | `undefined` | 自定义图片上传函数；未提供时图片以 base64 内嵌 |
114
+ | `uploadVideo` | `UploadFn` | `undefined` | 自定义视频上传函数；未提供时仅支持输入视频地址 |
115
+ | `wordCount` | `true \| number` | `undefined` | 字符计数；传入数字时同时限制最大字符数 |
102
116
 
103
- ### `editable`
104
-
105
- 类型：`boolean`
106
-
107
- 默认值：`true`
108
-
109
- 是否可编辑。设为 `false` 时编辑器进入只读模式。
110
-
111
- ```html
112
- <Tiptap :editable="false" />
117
+ ```ts
118
+ type UploadFn = (file: File, onProgress: (percent: number) => void) => Promise<string>
113
119
  ```
114
120
 
115
- ### `outputFormat`
121
+ ### Events
116
122
 
117
- 类型：`'html' | 'json'`
123
+ | 事件 | 回调参数 | 说明 |
124
+ | -------- | ------------------------- | -------------------- |
125
+ | `change` | `(value: string) => void` | 内容更新时触发 |
126
+ | `blur` | `(value: string) => void` | 编辑器失去焦点时触发 |
118
127
 
119
- 默认值：`'html'`
128
+ ### Slots
120
129
 
121
- `modelValue` 的输出格式。
130
+ | 插槽 | 参数 | 说明 |
131
+ | ------------ | ------------------------------------------ | ------------------ |
132
+ | `word-count` | `{ count: number; limit: true \| number }` | 自定义字符计数区域 |
122
133
 
123
- - `'html'`：输出 HTML 字符串
124
- - `'json'`：输出 JSON 字符串（Tiptap 文档格式）
125
-
126
- ```html
127
- <Tiptap output-format="json" />
134
+ ```vue
135
+ <Tiptap :word-count="500">
136
+ <template #word-count="{ count, limit }">
137
+ <span>{{ count }} / {{ limit }}</span>
138
+ </template>
139
+ </Tiptap>
128
140
  ```
129
141
 
130
- ### `disabledPlugins`
131
-
132
- 类型：`PluginName[]`
142
+ ## 插件配置
133
143
 
134
- 默认值：`[]`
144
+ 默认会启用全部内置插件。可以通过 `disabledPlugins` 禁用不需要的功能：
135
145
 
136
- 需要禁用的插件名称列表，默认启用全部插件。
137
-
138
- ```html
146
+ ```vue
139
147
  <Tiptap :disabled-plugins="['image', 'video', 'table']" />
140
148
  ```
141
149
 
142
- 可用插件名称：
150
+ 可用插件名：
143
151
 
144
152
  | 插件名 | 说明 |
145
153
  | ---------------- | -------------------- |
@@ -150,12 +158,12 @@ const content = ref('<h1>标题</h1><p>这个编辑器很棒！</p>')
150
158
  | `underline` | 下划线 |
151
159
  | `strike` | 删除线 |
152
160
  | `code` | 行内代码 |
153
- | `codeBlock` | 代码块（含语法高亮） |
161
+ | `codeBlock` | 代码块，支持语法高亮 |
154
162
  | `blockquote` | 引用块 |
155
163
  | `bulletList` | 无序列表 |
156
164
  | `orderedList` | 有序列表 |
157
165
  | `taskList` | 任务清单 |
158
- | `list` | 列表工具 |
166
+ | `list` | 列表工具入口 |
159
167
  | `textAlign` | 文本对齐 |
160
168
  | `horizontalRule` | 分割线 |
161
169
  | `clearFormat` | 清除格式 |
@@ -163,120 +171,100 @@ const content = ref('<h1>标题</h1><p>这个编辑器很棒！</p>')
163
171
  | `highlight` | 文字高亮 |
164
172
  | `link` | 超链接 |
165
173
  | `image` | 图片插入与上传 |
166
- | `video` | 视频嵌入 |
174
+ | `video` | 视频嵌入与上传 |
167
175
  | `table` | 表格 |
168
176
  | `fontFamily` | 字体 |
169
177
  | `fontSize` | 字号 |
170
178
  | `print` | 打印 |
171
179
  | `fullscreen` | 全屏模式 |
172
180
 
173
- ### `uploadImage`
181
+ ## 常用示例
174
182
 
175
- 类型：`(file: File) => Promise<string>`
183
+ ### JSON 输出
176
184
 
177
- 默认值：`undefined`
178
-
179
- 自定义图片上传函数，返回图片最终 URL。未提供时图片以 base64 格式内嵌。
180
-
181
- ```html
182
- <Tiptap :upload-image="handleUpload" />
185
+ ```vue
186
+ <Tiptap v-model="content" output-format="json" />
183
187
  ```
184
188
 
185
- ```ts
186
- const handleUpload = async (file: File): Promise<string> => {
187
- const url = await uploadToOSS(file)
188
- return url
189
- }
189
+ ### 只读模式
190
+
191
+ ```vue
192
+ <Tiptap v-model="content" :editable="false" />
190
193
  ```
191
194
 
192
- ### `uploadVideo`
195
+ ### 图片上传
193
196
 
194
- 类型：`(file: File) => Promise<string>`
197
+ ```vue
198
+ <template>
199
+ <Tiptap v-model="content" :upload-image="uploadImage" />
200
+ </template>
195
201
 
196
- 默认值：`undefined`
202
+ <script setup lang="ts">
203
+ import { ref } from 'vue'
197
204
 
198
- 自定义视频上传函数，返回视频最终 URL。提供后工具栏会出现"本地上传"入口；未提供时仅支持输入视频地址。
205
+ const content = ref('')
199
206
 
200
- ```html
201
- <Tiptap :upload-video="handleVideoUpload" />
202
- ```
203
-
204
- ```ts
205
- const handleVideoUpload = async (file: File): Promise<string> => {
207
+ const uploadImage = async (file: File, onProgress: (percent: number) => void) => {
208
+ onProgress(20)
206
209
  const url = await uploadToOSS(file)
210
+ onProgress(100)
207
211
  return url
208
212
  }
213
+ </script>
209
214
  ```
210
215
 
211
- ### `wordCount`
212
-
213
- 类型：`true | number`
214
-
215
- 默认值：`undefined`
216
-
217
- 字符计数。传 `true` 仅展示计数；传 `number` 同时限制最大字符数。
218
-
219
- ```html
220
- <!-- 仅展示计数 -->
221
- <Tiptap :word-count="true" />
222
-
223
- <!-- 计数并限制最多 500 字符 -->
224
- <Tiptap :word-count="500" />
225
- ```
226
-
227
- ## 👽 事件
228
-
229
- ### `change`
230
-
231
- 内容更新时触发，参数为当前输出字符串。
216
+ ### 视频上传
232
217
 
233
218
  ```vue
234
219
  <template>
235
- <Tiptap @change="onChange" />
220
+ <Tiptap v-model="content" :upload-video="uploadVideo" />
236
221
  </template>
237
222
 
238
- <script setup>
239
- const onChange = (value: string) => {
240
- console.log(value)
223
+ <script setup lang="ts">
224
+ import { ref } from 'vue'
225
+
226
+ const content = ref('')
227
+
228
+ const uploadVideo = async (file: File, onProgress: (percent: number) => void) => {
229
+ onProgress(20)
230
+ const url = await uploadToOSS(file)
231
+ onProgress(100)
232
+ return url
241
233
  }
242
234
  </script>
243
235
  ```
244
236
 
245
- ### `blur`
246
-
247
- 编辑器失去焦点时触发，参数为当前输出字符串。
237
+ ## 本地开发
248
238
 
249
- ```vue
250
- <Tiptap @blur="onBlur" />
239
+ ```bash
240
+ pnpm install
241
+ pnpm dev
251
242
  ```
252
243
 
253
- ## 🎰 插槽
244
+ 构建组件库：
254
245
 
255
- ### `word-count`
246
+ ```bash
247
+ pnpm build
248
+ ```
256
249
 
257
- 自定义字符计数区域的 UI。
250
+ 类型检查：
258
251
 
259
- ```vue
260
- <Tiptap :word-count="500">
261
- <template #word-count="{ count, limit }">
262
- <span>{{ count }} / {{ limit }}</span>
263
- </template>
264
- </Tiptap>
252
+ ```bash
253
+ pnpm type-check
265
254
  ```
266
255
 
267
- 插槽参数：
268
-
269
- | 参数 | 类型 | 说明 |
270
- | ------- | ---------------- | -------------------------- |
271
- | `count` | `number` | 当前字符数 |
272
- | `limit` | `true \| number` | `word-count` prop 的传入值 |
256
+ ## 相关链接
273
257
 
274
- ## 🙏 致谢
258
+ | 名称 | 地址 |
259
+ | ---------- | ------------------------------------------------------- |
260
+ | Tiptap | https://github.com/ueberdosis/tiptap |
261
+ | Antdv Next | https://github.com/antdv-next/antdv-next |
262
+ | Issues | https://github.com/pengyinghao/antdv-next-tiptap/issues |
275
263
 
276
- 本项目受 [element-tiptap](https://github.com/Leecason/element-tiptap) 启发，感谢 [Tiptap](https://github.com/ueberdosis/tiptap) 和 [Ant Design Vue](https://antdv-next.antfu.me/) 的开源支持。
264
+ ## 致谢
277
265
 
278
- ## 🚀 快速启动
266
+ 本项目受 [element-tiptap](https://github.com/Leecason/element-tiptap) 启发，感谢 Tiptap、Antdv Next 以及相关开源生态。
279
267
 
280
- 想快速体验本项目的魅力？我们为您准备了在线演示：
268
+ ## License
281
269
 
282
- [![在线演示](https://img.shields.io/badge/在线演示-Antdv_Tiptap-4a90e2)](https://github.com/pengyinghao/antdv-next-tiptap)
270
+ [MIT](./LICENSE)