https://github.com/clinfc/wangeditor5-for-vue3-example
wangeditor5-for-vue3 组件的在线示例
https://github.com/clinfc/wangeditor5-for-vue3-example
rich-text rich-text-editor vue vue3 wangeditor wangeditor5
Last synced: 7 months ago
JSON representation
wangeditor5-for-vue3 组件的在线示例
- Host: GitHub
- URL: https://github.com/clinfc/wangeditor5-for-vue3-example
- Owner: clinfc
- Created: 2022-03-16T12:20:34.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-05-08T06:18:07.000Z (over 3 years ago)
- Last Synced: 2025-01-06T20:46:08.904Z (9 months ago)
- Topics: rich-text, rich-text-editor, vue, vue3, wangeditor, wangeditor5
- Language: Vue
- Homepage: https://clinfc.github.io/wangeditor5-for-vue3-example/
- Size: 1.82 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# element-plus + wangeditor5-for-vue3
`wangeditor5-for-vue3` 的 `element-plus` 使用示例
## 用户文档
- [wangeditor5](https://www.wangeditor.com/v5/)
- [wangeditor5-for-vue2](https://clinfc.github.io/wangeditor5-for-vue2/)
- [wangeditor5-for-vue3](https://clinfc.github.io/wangeditor5-for-vue3/)
## 运行
### yarn
```sh
// 安装依赖
yarn
// 安装 wangeditor5-for-vue3
yarn add wangeditor5-for-vue3
// 运行
yarn run dev
```
### npm
```sh
// 安装依赖
npm i
// 安装 wangeditor5-for-vue3
npm i wangeditor5-for-vue3
// 运行
npm run dev
```
## 表单验证
[src/plugins/form-fields.ts](./src/plugins/form-fields.ts)
```ts
import { useFormItem } from 'element-plus'
import { WeEditorFormFields } from 'wangeditor5-for-vue3'
export default function weFormFields() {
const formFileds: WeEditorFormFields = {}
const { formItem } = useFormItem()
if (formItem && typeof formItem.validate == 'function') {
formFileds.blurField = () => {
formItem.validate('blur')
}
formFileds.changeField = () => {
formItem.validate('change')
}
}
return formFileds
}
```
如果上面这一套无法正常运行，请使用下面这一套。下面这一套为 ElementPlus 旧版本的使用方式。
```ts
import { inject } from 'vue'
import { elFormItemKey } from 'element-plus'
import { WeEditorFormFields } from 'wangeditor5-for-vue3'
export default function weFormFields() {
const elFormItem = inject(elFormItemKey)
const formFileds: WeEditorFormFields = {}
if (elFormItem && typeof elFormItem.validate === 'function') {
formFileds.blurField = () => {
elFormItem.validate('blur')
}
formFileds.changeField = () => {
elFormItem.validate('change')
}
}
return formFileds
}
```
[src/main.ts](./src/main.ts)
```ts
import App from './App.vue'
import { createApp } from 'vue'
import weFormFields from './plugins/form-fields'
const app = createApp(App)
app.config.globalProperties.$weFormFields = weFormFields
app.mount('#app')
```