Editor 富文本组件
基于 wangeditor 封装。
目前项目中的 editor 只是做了简单的封装,需要开发者根据实际情况,自行配置 editorConfig 属性,如,上传图片功能。
可自行阅读 wangeditor文档
Editor 组件位于 src/components/Editor 内
用法
<script setup lang="ts">
import { Editor } from '@/components/Editor'
import { ref} from 'vue'
const defaultHtml = ref('<p>hello <strong>world</strong></p>')
const change = (html: string) => {
console.log(html)
}
</script>
<template>
<Editor v-model="defaultHtml" ref="editorRef" @change="change" />
</template>
Editor 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| editorId | 富文本组件唯一值,必填项 | string | - | wangeEditor-1 |
| height | 高度 | string/number | - | 500px |
| editorConfig | wangeditor 组件的所有配置项 | IEditorConfig | - | - |
| modelValue | 内容双向绑定,支持v-model | string | - | - |
Editor 事件
| 方法名 | 说明 | 回调参数 |
|---|---|---|
| change | 内容改变时,返回 editor 实例 | editor: IDomEditor |
Editor 方法
| 方法名 | 说明 | 回调参数 |
|---|---|---|
| getEditorRef | 获取 editor 实例 | () => Promise<IDomEditor> |
vue-element-plus-admin