Editor 富文本编辑器

💡 组件名：my-editor

富文本编辑器组件，支持本地图片和视频上传

局部导入

import { defineAsyncComponent } from 'vue'

const MyEditor = defineAsyncComponent(() => import('/@/components/my-editor/index.vue'))

基本使用

const formRef = ref()
const editorRef = ref()

const state = reactive({
  form: { content: '' },
})

const testEditorContent = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback()
  }
  if (editorRef.value.isEmpty()) {
    callback(new Error('请输入内容'))
  } else {
    callback()
  }
}

const onValidateContent = () => {
  formRef.value.validateField('content')
}

<el-form-item
  label="内容"
  prop="content"
  :rules="[
    { required: true, message: '请输入内容', trigger: ['blur', 'change'] },
    { validator: testEditorContent, trigger: ['blur', 'change'] },
  ]"
>
  <MyEditor ref="editorRef" v-model:model-value="form.content" @onBlur="onValidateContent" @onChange="onValidateContent">
  </MyEditor>
</el-form-item>

Props

参数	说明	类型	默认值	可选值
disable	是否禁用	Boolean	false	-
placeholder	输入框占位文本	String	请输入内容...	-
mode	模式	String	default	default | simple
height	高度	String	310px	-
modelValue	HTML 内容	String	-	-
getText	纯文本内容	String	-	-