ai-word-editor 0.0.39 → 0.0.41
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 +48 -55
- package/assets/wechat.jpg +0 -0
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,53 +1,26 @@
|
|
|
1
|
-
# ai-word-editor
|
|
1
|
+
# ai-word-editor(Vue3 富文本编辑器组件包)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
基于 Vue3 + Vite 的编辑器组件包,提供:
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
- 编辑器组件:在业务项目中直接使用
|
|
6
|
+
- Word 导出:将 HTML 导出为 `.docx`(可选批注数据)
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
## 环境要求
|
|
8
9
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
```
|
|
10
|
+
- Node.js:建议 18+
|
|
11
|
+
- Vue:3.x
|
|
12
12
|
|
|
13
|
-
##
|
|
14
|
-
|
|
15
|
-
在本仓库执行:
|
|
13
|
+
## 安装
|
|
16
14
|
|
|
17
15
|
```bash
|
|
18
|
-
npm
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
产物输出到 `dist/`,类型声明输出到 `dist/types/`。
|
|
22
|
-
|
|
23
|
-
## 2. 在宿主项目安装(两种方式任选)
|
|
24
|
-
|
|
25
|
-
### 方式 A:本地 file 依赖(最快,适合本机联调)
|
|
26
|
-
|
|
27
|
-
宿主项目 `package.json`:
|
|
28
|
-
|
|
29
|
-
```json
|
|
30
|
-
{
|
|
31
|
-
"dependencies": {
|
|
32
|
-
"ai-word-editor": "file:../umo-edior"
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
然后在宿主项目执行:
|
|
38
|
-
|
|
39
|
-
```bash
|
|
40
|
-
npm i
|
|
16
|
+
npm install ai-word-editor
|
|
17
|
+
# 或 pnpm add ai-word-editor
|
|
18
|
+
# 或 yarn add ai-word-editor
|
|
41
19
|
```
|
|
42
20
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
- 把 `package.json` 的 `"private": true` 改为 `false`,并设置合适的 `name/version` 后发布到你的 npm 仓库。
|
|
46
|
-
- 宿主项目正常 `npm i ai-word-editor` 安装即可。
|
|
21
|
+
## 快速开始(推荐:插件方式)
|
|
47
22
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
在宿主项目 `main.ts`:
|
|
23
|
+
### 1)在 `main.ts` 注册
|
|
51
24
|
|
|
52
25
|
```ts
|
|
53
26
|
import { createApp } from 'vue'
|
|
@@ -58,7 +31,7 @@ import 'ai-word-editor/style.css'
|
|
|
58
31
|
createApp(App).use(UmoEditorAppPlugin, {}).mount('#app')
|
|
59
32
|
```
|
|
60
33
|
|
|
61
|
-
|
|
34
|
+
### 2)在页面中使用
|
|
62
35
|
|
|
63
36
|
```vue
|
|
64
37
|
<template>
|
|
@@ -66,15 +39,23 @@ createApp(App).use(UmoEditorAppPlugin, {}).mount('#app')
|
|
|
66
39
|
</template>
|
|
67
40
|
```
|
|
68
41
|
|
|
69
|
-
|
|
42
|
+
## 重要:`cdn-url` 静态资源(必须配置)
|
|
43
|
+
|
|
44
|
+
`@umoteam/editor` 运行时需要加载 `@umoteam/editor-external` 的静态资源。
|
|
45
|
+
线上环境不要依赖 `'/node_modules/@umoteam/editor-external'` 这类路径(通常不可用)。
|
|
46
|
+
|
|
47
|
+
推荐做法:
|
|
48
|
+
|
|
49
|
+
- 将 `node_modules/@umoteam/editor-external` 复制/同步到宿主项目 `public/umo-editor-external/`
|
|
50
|
+
- 然后组件传入:`cdn-url="/umo-editor-external"`
|
|
51
|
+
|
|
52
|
+
## 按需使用(只导入组件)
|
|
70
53
|
|
|
71
54
|
```ts
|
|
72
55
|
import { UmoEditorApp } from 'ai-word-editor'
|
|
73
56
|
```
|
|
74
57
|
|
|
75
|
-
##
|
|
76
|
-
|
|
77
|
-
如果你只想复用导出 `.docx` 的能力,可以单独按需引入工具函数,而不使用整个编辑器组件:
|
|
58
|
+
## Word 导出(仅使用导出能力)
|
|
78
59
|
|
|
79
60
|
### `exportToDocx`(带批注)
|
|
80
61
|
|
|
@@ -86,12 +67,10 @@ await exportToDocx(html, comments, '文件名')
|
|
|
86
67
|
|
|
87
68
|
- `html`:编辑器生成的 HTML 字符串(例如 Tiptap 的 `editor.getHTML()`)
|
|
88
69
|
- `comments`:批注数组,形如 `[{ id, note, author, createdAt, resolved }]`
|
|
89
|
-
- `'文件名'`:导出的文件名(不含 `.docx
|
|
70
|
+
- `'文件名'`:导出的文件名(不含 `.docx`),默认为 `'文档'`
|
|
90
71
|
|
|
91
72
|
### `exportHtmlToDocx`(纯 HTML,无批注)
|
|
92
73
|
|
|
93
|
-
如果不需要处理批注数据,可以使用更简洁的通用方法:
|
|
94
|
-
|
|
95
74
|
```ts
|
|
96
75
|
import { exportHtmlToDocx } from 'ai-word-editor/word-docx-export'
|
|
97
76
|
|
|
@@ -99,16 +78,30 @@ await exportHtmlToDocx(html, '文件名')
|
|
|
99
78
|
```
|
|
100
79
|
|
|
101
80
|
- `html`:编辑器生成的 HTML 字符串
|
|
102
|
-
- `'文件名'`:导出的文件名(不含 `.docx
|
|
81
|
+
- `'文件名'`:导出的文件名(不含 `.docx`),默认为 `'文档'`
|
|
103
82
|
|
|
104
|
-
|
|
83
|
+
依赖说明:
|
|
105
84
|
|
|
106
|
-
|
|
85
|
+
- 宿主项目需安装 `file-saver`、`jszip`
|
|
107
86
|
|
|
108
|
-
|
|
87
|
+
## FAQ
|
|
109
88
|
|
|
110
|
-
|
|
89
|
+
- 页面空白/资源 404:优先检查 `cdn-url` 是否指向已同步到 `public` 的资源目录。
|
|
90
|
+
- 导出失败:确认宿主项目已安装 `file-saver`、`jszip`,并检查运行环境是否允许下载文件。
|
|
111
91
|
|
|
112
|
-
|
|
113
|
-
|
|
92
|
+
## 联系方式
|
|
93
|
+
|
|
94
|
+
- 微信:扫码添加(备注:ai-word-editor)
|
|
95
|
+
|
|
96
|
+

|
|
97
|
+
|
|
98
|
+
## 本仓库打包与发布(维护者)
|
|
99
|
+
|
|
100
|
+
在本仓库执行:
|
|
101
|
+
|
|
102
|
+
```bash
|
|
103
|
+
npm run build:lib
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
产物输出到 `dist/`,类型声明输出到 `dist/types/`。
|
|
114
107
|
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ai-word-editor",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.41",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"module": "./dist/index.js",
|
|
@@ -18,7 +18,8 @@
|
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
"files": [
|
|
21
|
-
"dist"
|
|
21
|
+
"dist",
|
|
22
|
+
"assets"
|
|
22
23
|
],
|
|
23
24
|
"sideEffects": [
|
|
24
25
|
"**/*.css"
|