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
editorConfigwangeditor 组件的所有配置项IEditorConfig--
modelValue内容双向绑定,支持v-modelstring--

Editor 事件

方法名说明回调参数
change内容改变时,返回 editor 实例editor: IDomEditor

Editor 方法

方法名说明回调参数
getEditorRef获取 editor 实例() => Promise<IDomEditor>