vue-element-plus-admin-doc/components/editor.md

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>