@creatorsn/powereditor3 0.2.13 → 0.3.1
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 +132 -132
- package/README_zh.md +132 -132
- package/dist/powereditor3.css +1 -1
- package/dist/powereditor3.js +22499 -13958
- package/dist/powereditor3.umd.cjs +87 -83
- package/dist/types/editor/index.d.ts +63 -0
- package/dist/types/editor/src/components/custom/basic/dragHandler/index.d.ts +3 -0
- package/dist/types/editor/src/components/custom/basic/dragHandler/index.vue.d.ts +55 -0
- package/dist/types/editor/src/index.vue.d.ts +63 -0
- package/package.json +9 -2
package/README.md
CHANGED
|
@@ -1,132 +1,132 @@
|
|
|
1
|
-
<div align="center">
|
|
2
|
-
<img src="https://raw.githubusercontent.com/Creator-SN/PowerEditor3/main/docs/public/assets/logo.svg" width="220" alt="PowerEditor3 Logo" />
|
|
3
|
-
|
|
4
|
-
[](https://vuejs.org/)
|
|
5
|
-
[](https://vitejs.dev/)
|
|
6
|
-
[](https://tiptap.dev/)
|
|
7
|
-
[](https://www.npmjs.com/package/@creatorsn/powereditor3)
|
|
8
|
-
[](https://www.npmjs.com/package/@creatorsn/powereditor3)
|
|
9
|
-
[](#license)
|
|
10
|
-
|
|
11
|
-
</div>
|
|
12
|
-
|
|
13
|
-
<h4 align="center">
|
|
14
|
-
<i>A Vue 3 rich text editor powered by Tiptap and VFluent3, built for clean editing experiences in modern web apps.</i>
|
|
15
|
-
</h4>
|
|
16
|
-
|
|
17
|
-
<p align="center">
|
|
18
|
-
<a href="https://creator-sn.github.io/PowerEditor3">Documentation</a>
|
|
19
|
-
·
|
|
20
|
-
<a href="https://www.npmjs.com/package/@creatorsn/powereditor3">npm</a>
|
|
21
|
-
·
|
|
22
|
-
<a href="https://github.com/Creator-SN/PowerEditor3/issues">Issues</a>
|
|
23
|
-
</p>
|
|
24
|
-
|
|
25
|
-
English | [简体中文](./README_zh.md)
|
|
26
|
-
|
|
27
|
-
## PowerEditor3
|
|
28
|
-
|
|
29
|
-
PowerEditor3 is a Vue 3 rich text editor component built on top of [Tiptap](https://tiptap.dev/) and [VFluent3](https://github.com/Creator-SN/VFluent3). It packages a ready-to-use editor with toolbar controls, theme switching, image preview, Markdown conversion, mention support, and extension points for business-specific editing flows.
|
|
30
|
-
|
|
31
|
-
The project is designed for real application pages where rich text needs to be edited, displayed, saved as HTML or JSON, converted to Markdown, or extended with custom upload and decoding logic.
|
|
32
|
-
|
|
33
|
-
## Features
|
|
34
|
-
|
|
35
|
-
- Rich text editing based on Tiptap and ProseMirror.
|
|
36
|
-
- Vue 3 plugin installation with global `power-editor` registration.
|
|
37
|
-
- Light and dark themes, powered by VFluent3 styling.
|
|
38
|
-
- HTML, JSON and Markdown save or conversion workflows.
|
|
39
|
-
- Custom toolbar buttons through Vue slots.
|
|
40
|
-
- Mention item configuration for user, topic or business entity selection.
|
|
41
|
-
- Markdown decoder plugins for custom node and mark serialization.
|
|
42
|
-
- Image interceptor API for upload, replacement and progress status handling.
|
|
43
|
-
|
|
44
|
-
## Installation
|
|
45
|
-
|
|
46
|
-
Install the package with Yarn:
|
|
47
|
-
|
|
48
|
-
```sh
|
|
49
|
-
yarn add @creatorsn/powereditor3
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
npm and pnpm work in a similar way.
|
|
53
|
-
|
|
54
|
-
## Quick Start
|
|
55
|
-
|
|
56
|
-
Register PowerEditor3 in your Vue entry file, usually `main.js`:
|
|
57
|
-
|
|
58
|
-
```js
|
|
59
|
-
import { createApp } from 'vue';
|
|
60
|
-
import App from './App.vue';
|
|
61
|
-
import PowerEditor from '@creatorsn/powereditor3';
|
|
62
|
-
import '@creatorsn/powereditor3/powereditor3.css';
|
|
63
|
-
|
|
64
|
-
const app = createApp(App);
|
|
65
|
-
|
|
66
|
-
app.use(PowerEditor);
|
|
67
|
-
app.mount('#app');
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
Then use the editor in your Vue app:
|
|
71
|
-
|
|
72
|
-
```vue
|
|
73
|
-
<template>
|
|
74
|
-
<power-editor v-model="content" />
|
|
75
|
-
</template>
|
|
76
|
-
|
|
77
|
-
<script setup>
|
|
78
|
-
import { ref } from 'vue';
|
|
79
|
-
|
|
80
|
-
const content = ref('<p>Hello PowerEditor3</p>');
|
|
81
|
-
</script>
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
## Documentation
|
|
85
|
-
|
|
86
|
-
Read the full documentation, quick start guide and API reference:
|
|
87
|
-
|
|
88
|
-
[https://creator-sn.github.io/PowerEditor3](https://creator-sn.github.io/PowerEditor3)
|
|
89
|
-
|
|
90
|
-
## Development
|
|
91
|
-
|
|
92
|
-
Clone the repository and install dependencies:
|
|
93
|
-
|
|
94
|
-
```sh
|
|
95
|
-
yarn
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
Start the VitePress documentation site:
|
|
99
|
-
|
|
100
|
-
```sh
|
|
101
|
-
yarn docs:dev
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
Build the documentation site:
|
|
105
|
-
|
|
106
|
-
```sh
|
|
107
|
-
yarn docs:build
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
Build the library:
|
|
111
|
-
|
|
112
|
-
```sh
|
|
113
|
-
yarn build
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
## Related Projects
|
|
117
|
-
|
|
118
|
-
PowerEditor3 uses VFluent3 for its UI foundation:
|
|
119
|
-
|
|
120
|
-
[https://github.com/Creator-SN/VFluent3](https://github.com/Creator-SN/VFluent3)
|
|
121
|
-
|
|
122
|
-
## Contributing
|
|
123
|
-
|
|
124
|
-
PowerEditor3 is still growing, and feedback is welcome.
|
|
125
|
-
|
|
126
|
-
If you find a bug, have an idea, or want to improve the editor experience, please open an [issue](https://github.com/Creator-SN/PowerEditor3/issues) or submit a pull request.
|
|
127
|
-
|
|
128
|
-
## License
|
|
129
|
-
|
|
130
|
-
PowerEditor3 is released under the MIT License.
|
|
131
|
-
|
|
132
|
-
Copyright (c) 2026 Creator SN
|
|
1
|
+
<div align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/Creator-SN/PowerEditor3/main/docs/public/assets/logo.svg" width="220" alt="PowerEditor3 Logo" />
|
|
3
|
+
|
|
4
|
+
[](https://vuejs.org/)
|
|
5
|
+
[](https://vitejs.dev/)
|
|
6
|
+
[](https://tiptap.dev/)
|
|
7
|
+
[](https://www.npmjs.com/package/@creatorsn/powereditor3)
|
|
8
|
+
[](https://www.npmjs.com/package/@creatorsn/powereditor3)
|
|
9
|
+
[](#license)
|
|
10
|
+
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
<h4 align="center">
|
|
14
|
+
<i>A Vue 3 rich text editor powered by Tiptap and VFluent3, built for clean editing experiences in modern web apps.</i>
|
|
15
|
+
</h4>
|
|
16
|
+
|
|
17
|
+
<p align="center">
|
|
18
|
+
<a href="https://creator-sn.github.io/PowerEditor3">Documentation</a>
|
|
19
|
+
·
|
|
20
|
+
<a href="https://www.npmjs.com/package/@creatorsn/powereditor3">npm</a>
|
|
21
|
+
·
|
|
22
|
+
<a href="https://github.com/Creator-SN/PowerEditor3/issues">Issues</a>
|
|
23
|
+
</p>
|
|
24
|
+
|
|
25
|
+
English | [简体中文](./README_zh.md)
|
|
26
|
+
|
|
27
|
+
## PowerEditor3
|
|
28
|
+
|
|
29
|
+
PowerEditor3 is a Vue 3 rich text editor component built on top of [Tiptap](https://tiptap.dev/) and [VFluent3](https://github.com/Creator-SN/VFluent3). It packages a ready-to-use editor with toolbar controls, theme switching, image preview, Markdown conversion, mention support, and extension points for business-specific editing flows.
|
|
30
|
+
|
|
31
|
+
The project is designed for real application pages where rich text needs to be edited, displayed, saved as HTML or JSON, converted to Markdown, or extended with custom upload and decoding logic.
|
|
32
|
+
|
|
33
|
+
## Features
|
|
34
|
+
|
|
35
|
+
- Rich text editing based on Tiptap and ProseMirror.
|
|
36
|
+
- Vue 3 plugin installation with global `power-editor` registration.
|
|
37
|
+
- Light and dark themes, powered by VFluent3 styling.
|
|
38
|
+
- HTML, JSON and Markdown save or conversion workflows.
|
|
39
|
+
- Custom toolbar buttons through Vue slots.
|
|
40
|
+
- Mention item configuration for user, topic or business entity selection.
|
|
41
|
+
- Markdown decoder plugins for custom node and mark serialization.
|
|
42
|
+
- Image interceptor API for upload, replacement and progress status handling.
|
|
43
|
+
|
|
44
|
+
## Installation
|
|
45
|
+
|
|
46
|
+
Install the package with Yarn:
|
|
47
|
+
|
|
48
|
+
```sh
|
|
49
|
+
yarn add @creatorsn/powereditor3
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
npm and pnpm work in a similar way.
|
|
53
|
+
|
|
54
|
+
## Quick Start
|
|
55
|
+
|
|
56
|
+
Register PowerEditor3 in your Vue entry file, usually `main.js`:
|
|
57
|
+
|
|
58
|
+
```js
|
|
59
|
+
import { createApp } from 'vue';
|
|
60
|
+
import App from './App.vue';
|
|
61
|
+
import PowerEditor from '@creatorsn/powereditor3';
|
|
62
|
+
import '@creatorsn/powereditor3/powereditor3.css';
|
|
63
|
+
|
|
64
|
+
const app = createApp(App);
|
|
65
|
+
|
|
66
|
+
app.use(PowerEditor);
|
|
67
|
+
app.mount('#app');
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Then use the editor in your Vue app:
|
|
71
|
+
|
|
72
|
+
```vue
|
|
73
|
+
<template>
|
|
74
|
+
<power-editor v-model="content" />
|
|
75
|
+
</template>
|
|
76
|
+
|
|
77
|
+
<script setup>
|
|
78
|
+
import { ref } from 'vue';
|
|
79
|
+
|
|
80
|
+
const content = ref('<p>Hello PowerEditor3</p>');
|
|
81
|
+
</script>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## Documentation
|
|
85
|
+
|
|
86
|
+
Read the full documentation, quick start guide and API reference:
|
|
87
|
+
|
|
88
|
+
[https://creator-sn.github.io/PowerEditor3](https://creator-sn.github.io/PowerEditor3)
|
|
89
|
+
|
|
90
|
+
## Development
|
|
91
|
+
|
|
92
|
+
Clone the repository and install dependencies:
|
|
93
|
+
|
|
94
|
+
```sh
|
|
95
|
+
yarn
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
Start the VitePress documentation site:
|
|
99
|
+
|
|
100
|
+
```sh
|
|
101
|
+
yarn docs:dev
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
Build the documentation site:
|
|
105
|
+
|
|
106
|
+
```sh
|
|
107
|
+
yarn docs:build
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
Build the library:
|
|
111
|
+
|
|
112
|
+
```sh
|
|
113
|
+
yarn build
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
## Related Projects
|
|
117
|
+
|
|
118
|
+
PowerEditor3 uses VFluent3 for its UI foundation:
|
|
119
|
+
|
|
120
|
+
[https://github.com/Creator-SN/VFluent3](https://github.com/Creator-SN/VFluent3)
|
|
121
|
+
|
|
122
|
+
## Contributing
|
|
123
|
+
|
|
124
|
+
PowerEditor3 is still growing, and feedback is welcome.
|
|
125
|
+
|
|
126
|
+
If you find a bug, have an idea, or want to improve the editor experience, please open an [issue](https://github.com/Creator-SN/PowerEditor3/issues) or submit a pull request.
|
|
127
|
+
|
|
128
|
+
## License
|
|
129
|
+
|
|
130
|
+
PowerEditor3 is released under the MIT License.
|
|
131
|
+
|
|
132
|
+
Copyright (c) 2026 Creator SN
|
package/README_zh.md
CHANGED
|
@@ -1,132 +1,132 @@
|
|
|
1
|
-
<div align="center">
|
|
2
|
-
<img src="https://raw.githubusercontent.com/Creator-SN/PowerEditor3/main/docs/public/assets/logo.svg" width="220" alt="PowerEditor3 Logo" />
|
|
3
|
-
|
|
4
|
-
[](https://vuejs.org/)
|
|
5
|
-
[](https://vitejs.dev/)
|
|
6
|
-
[](https://tiptap.dev/)
|
|
7
|
-
[](https://www.npmjs.com/package/@creatorsn/powereditor3)
|
|
8
|
-
[](https://www.npmjs.com/package/@creatorsn/powereditor3)
|
|
9
|
-
[](#license)
|
|
10
|
-
|
|
11
|
-
</div>
|
|
12
|
-
|
|
13
|
-
<h4 align="center">
|
|
14
|
-
<i>基于 Tiptap 与 VFluent3 的 Vue 3 富文本编辑器，为现代 Web 应用提供清爽、可扩展的编辑体验。</i>
|
|
15
|
-
</h4>
|
|
16
|
-
|
|
17
|
-
<p align="center">
|
|
18
|
-
<a href="https://creator-sn.github.io/PowerEditor3">文档</a>
|
|
19
|
-
·
|
|
20
|
-
<a href="https://www.npmjs.com/package/@creatorsn/powereditor3">npm</a>
|
|
21
|
-
·
|
|
22
|
-
<a href="https://github.com/Creator-SN/PowerEditor3/issues">Issues</a>
|
|
23
|
-
</p>
|
|
24
|
-
|
|
25
|
-
[English](./README.md) | 简体中文
|
|
26
|
-
|
|
27
|
-
## PowerEditor3
|
|
28
|
-
|
|
29
|
-
PowerEditor3 是一个基于 [Tiptap](https://tiptap.dev/) 与 [VFluent3](https://github.com/Creator-SN/VFluent3) 封装的 Vue 3 富文本编辑器组件。它提供开箱即用的工具栏、主题切换、图片预览、Markdown 互转、Mention 提及项，以及面向业务场景的扩展能力。
|
|
30
|
-
|
|
31
|
-
这个项目适合用于需要富文本编辑、只读展示、HTML 或 JSON 保存、Markdown 转换、自定义图片上传和自定义 Markdown 解码逻辑的业务页面。
|
|
32
|
-
|
|
33
|
-
## 特性
|
|
34
|
-
|
|
35
|
-
- 基于 Tiptap 和 ProseMirror 的富文本编辑能力。
|
|
36
|
-
- 通过 Vue 3 插件方式安装，全局注册 `power-editor`。
|
|
37
|
-
- 支持亮色与暗色主题，并使用 VFluent3 作为 UI 基础。
|
|
38
|
-
- 支持 HTML、JSON 与 Markdown 保存或转换流程。
|
|
39
|
-
- 通过 Vue 插槽扩展工具栏按钮。
|
|
40
|
-
- 支持 Mention 提及项配置，可用于用户、话题或业务对象选择。
|
|
41
|
-
- 支持 Markdown Decoder Plugins，自定义节点和标记的序列化方式。
|
|
42
|
-
- 支持 ImgInterceptor 图片拦截器，接管上传、替换和进度状态展示。
|
|
43
|
-
|
|
44
|
-
## 安装
|
|
45
|
-
|
|
46
|
-
使用 Yarn 安装：
|
|
47
|
-
|
|
48
|
-
```sh
|
|
49
|
-
yarn add @creatorsn/powereditor3
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
npm 和 pnpm 也可以按类似方式安装。
|
|
53
|
-
|
|
54
|
-
## 快速开始
|
|
55
|
-
|
|
56
|
-
在 Vue 入口文件中注册 PowerEditor3，通常是 `main.js`：
|
|
57
|
-
|
|
58
|
-
```js
|
|
59
|
-
import { createApp } from 'vue';
|
|
60
|
-
import App from './App.vue';
|
|
61
|
-
import PowerEditor from '@creatorsn/powereditor3';
|
|
62
|
-
import '@creatorsn/powereditor3/powereditor3.css';
|
|
63
|
-
|
|
64
|
-
const app = createApp(App);
|
|
65
|
-
|
|
66
|
-
app.use(PowerEditor);
|
|
67
|
-
app.mount('#app');
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
然后在 Vue 组件中使用编辑器：
|
|
71
|
-
|
|
72
|
-
```vue
|
|
73
|
-
<template>
|
|
74
|
-
<power-editor v-model="content" />
|
|
75
|
-
</template>
|
|
76
|
-
|
|
77
|
-
<script setup>
|
|
78
|
-
import { ref } from 'vue';
|
|
79
|
-
|
|
80
|
-
const content = ref('<p>Hello PowerEditor3</p>');
|
|
81
|
-
</script>
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
## 文档
|
|
85
|
-
|
|
86
|
-
查看完整文档、快速开始和 API 说明：
|
|
87
|
-
|
|
88
|
-
[https://creator-sn.github.io/PowerEditor3](https://creator-sn.github.io/PowerEditor3)
|
|
89
|
-
|
|
90
|
-
## 本地开发
|
|
91
|
-
|
|
92
|
-
克隆仓库后安装依赖：
|
|
93
|
-
|
|
94
|
-
```sh
|
|
95
|
-
yarn
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
启动 VitePress 文档站点：
|
|
99
|
-
|
|
100
|
-
```sh
|
|
101
|
-
yarn docs:dev
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
构建文档站点：
|
|
105
|
-
|
|
106
|
-
```sh
|
|
107
|
-
yarn docs:build
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
构建组件库：
|
|
111
|
-
|
|
112
|
-
```sh
|
|
113
|
-
yarn build
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
## 相关项目
|
|
117
|
-
|
|
118
|
-
PowerEditor3 使用 VFluent3 作为 UI 基础：
|
|
119
|
-
|
|
120
|
-
[https://github.com/Creator-SN/VFluent3](https://github.com/Creator-SN/VFluent3)
|
|
121
|
-
|
|
122
|
-
## 参与贡献
|
|
123
|
-
|
|
124
|
-
PowerEditor3 仍在持续完善，欢迎反馈和贡献。
|
|
125
|
-
|
|
126
|
-
如果你发现问题、有功能建议，或希望改进编辑器体验，请提交 [issue](https://github.com/Creator-SN/PowerEditor3/issues) 或发起 pull request。
|
|
127
|
-
|
|
128
|
-
## License
|
|
129
|
-
|
|
130
|
-
PowerEditor3 基于 MIT License 发布。
|
|
131
|
-
|
|
132
|
-
Copyright (c) 2026 Creator SN
|
|
1
|
+
<div align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/Creator-SN/PowerEditor3/main/docs/public/assets/logo.svg" width="220" alt="PowerEditor3 Logo" />
|
|
3
|
+
|
|
4
|
+
[](https://vuejs.org/)
|
|
5
|
+
[](https://vitejs.dev/)
|
|
6
|
+
[](https://tiptap.dev/)
|
|
7
|
+
[](https://www.npmjs.com/package/@creatorsn/powereditor3)
|
|
8
|
+
[](https://www.npmjs.com/package/@creatorsn/powereditor3)
|
|
9
|
+
[](#license)
|
|
10
|
+
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
<h4 align="center">
|
|
14
|
+
<i>基于 Tiptap 与 VFluent3 的 Vue 3 富文本编辑器，为现代 Web 应用提供清爽、可扩展的编辑体验。</i>
|
|
15
|
+
</h4>
|
|
16
|
+
|
|
17
|
+
<p align="center">
|
|
18
|
+
<a href="https://creator-sn.github.io/PowerEditor3">文档</a>
|
|
19
|
+
·
|
|
20
|
+
<a href="https://www.npmjs.com/package/@creatorsn/powereditor3">npm</a>
|
|
21
|
+
·
|
|
22
|
+
<a href="https://github.com/Creator-SN/PowerEditor3/issues">Issues</a>
|
|
23
|
+
</p>
|
|
24
|
+
|
|
25
|
+
[English](./README.md) | 简体中文
|
|
26
|
+
|
|
27
|
+
## PowerEditor3
|
|
28
|
+
|
|
29
|
+
PowerEditor3 是一个基于 [Tiptap](https://tiptap.dev/) 与 [VFluent3](https://github.com/Creator-SN/VFluent3) 封装的 Vue 3 富文本编辑器组件。它提供开箱即用的工具栏、主题切换、图片预览、Markdown 互转、Mention 提及项，以及面向业务场景的扩展能力。
|
|
30
|
+
|
|
31
|
+
这个项目适合用于需要富文本编辑、只读展示、HTML 或 JSON 保存、Markdown 转换、自定义图片上传和自定义 Markdown 解码逻辑的业务页面。
|
|
32
|
+
|
|
33
|
+
## 特性
|
|
34
|
+
|
|
35
|
+
- 基于 Tiptap 和 ProseMirror 的富文本编辑能力。
|
|
36
|
+
- 通过 Vue 3 插件方式安装，全局注册 `power-editor`。
|
|
37
|
+
- 支持亮色与暗色主题，并使用 VFluent3 作为 UI 基础。
|
|
38
|
+
- 支持 HTML、JSON 与 Markdown 保存或转换流程。
|
|
39
|
+
- 通过 Vue 插槽扩展工具栏按钮。
|
|
40
|
+
- 支持 Mention 提及项配置，可用于用户、话题或业务对象选择。
|
|
41
|
+
- 支持 Markdown Decoder Plugins，自定义节点和标记的序列化方式。
|
|
42
|
+
- 支持 ImgInterceptor 图片拦截器，接管上传、替换和进度状态展示。
|
|
43
|
+
|
|
44
|
+
## 安装
|
|
45
|
+
|
|
46
|
+
使用 Yarn 安装：
|
|
47
|
+
|
|
48
|
+
```sh
|
|
49
|
+
yarn add @creatorsn/powereditor3
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
npm 和 pnpm 也可以按类似方式安装。
|
|
53
|
+
|
|
54
|
+
## 快速开始
|
|
55
|
+
|
|
56
|
+
在 Vue 入口文件中注册 PowerEditor3，通常是 `main.js`：
|
|
57
|
+
|
|
58
|
+
```js
|
|
59
|
+
import { createApp } from 'vue';
|
|
60
|
+
import App from './App.vue';
|
|
61
|
+
import PowerEditor from '@creatorsn/powereditor3';
|
|
62
|
+
import '@creatorsn/powereditor3/powereditor3.css';
|
|
63
|
+
|
|
64
|
+
const app = createApp(App);
|
|
65
|
+
|
|
66
|
+
app.use(PowerEditor);
|
|
67
|
+
app.mount('#app');
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
然后在 Vue 组件中使用编辑器：
|
|
71
|
+
|
|
72
|
+
```vue
|
|
73
|
+
<template>
|
|
74
|
+
<power-editor v-model="content" />
|
|
75
|
+
</template>
|
|
76
|
+
|
|
77
|
+
<script setup>
|
|
78
|
+
import { ref } from 'vue';
|
|
79
|
+
|
|
80
|
+
const content = ref('<p>Hello PowerEditor3</p>');
|
|
81
|
+
</script>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## 文档
|
|
85
|
+
|
|
86
|
+
查看完整文档、快速开始和 API 说明：
|
|
87
|
+
|
|
88
|
+
[https://creator-sn.github.io/PowerEditor3](https://creator-sn.github.io/PowerEditor3)
|
|
89
|
+
|
|
90
|
+
## 本地开发
|
|
91
|
+
|
|
92
|
+
克隆仓库后安装依赖：
|
|
93
|
+
|
|
94
|
+
```sh
|
|
95
|
+
yarn
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
启动 VitePress 文档站点：
|
|
99
|
+
|
|
100
|
+
```sh
|
|
101
|
+
yarn docs:dev
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
构建文档站点：
|
|
105
|
+
|
|
106
|
+
```sh
|
|
107
|
+
yarn docs:build
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
构建组件库：
|
|
111
|
+
|
|
112
|
+
```sh
|
|
113
|
+
yarn build
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
## 相关项目
|
|
117
|
+
|
|
118
|
+
PowerEditor3 使用 VFluent3 作为 UI 基础：
|
|
119
|
+
|
|
120
|
+
[https://github.com/Creator-SN/VFluent3](https://github.com/Creator-SN/VFluent3)
|
|
121
|
+
|
|
122
|
+
## 参与贡献
|
|
123
|
+
|
|
124
|
+
PowerEditor3 仍在持续完善，欢迎反馈和贡献。
|
|
125
|
+
|
|
126
|
+
如果你发现问题、有功能建议，或希望改进编辑器体验，请提交 [issue](https://github.com/Creator-SN/PowerEditor3/issues) 或发起 pull request。
|
|
127
|
+
|
|
128
|
+
## License
|
|
129
|
+
|
|
130
|
+
PowerEditor3 基于 MIT License 发布。
|
|
131
|
+
|
|
132
|
+
Copyright (c) 2026 Creator SN
|