Editor Rich Text Editor

💡 Component: my-editor

Rich text editor component, supports local image and video upload

Local import

import { defineAsyncComponent } from 'vue'

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

Basic Usage

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('Please enter content'))
  } else {
    callback()
  }
}

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

<el-form-item
  label="Content"
  prop="content"
  :rules="[
    { required: true, message: 'Please enter content', 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

Prop	Description	Type	Default	Accepted Values
disable	Whether disabled	Boolean	false	-
placeholder	Input placeholder text	String	Please enter content...	-
mode	Mode	String	default	default | simple
height	Height	String	310px	-
modelValue	HTML content	String	-	-
getText	Plain text content	String	-	-