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>')
</script>

<template>
  <Editor :defaultHtml="defaultHtml" />
</template>

Editor 属性

属性说明类型可选值默认值
editorId富文本组件唯一值,必填项string-wangeEditor-1
height高度string/number-500px
editorConfigwangeditor 组件的所有配置项IEditorConfig--
defaultHtml初始内容string--

Editor 事件

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

Editor 方法

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