element ui 表单富文本内容长度验证

如果需要对富文本编辑器中的内容长度进行验证，可以使用 `el-form` 表单组件内部的 `validate` 方法结合富文本编辑器组件的 `getContentLength` 方法来实现。

具体地，假设我们使用了 `vue-quill-editor` 富文本编辑器组件，以下是一个实现富文本内容长度验证的示例代码：

<template>
  <div>
    <el-form :model="form" ref="form" :rules="rules">
      <el-form-item label="富文本内容">
        <quill-editor v-model="form.content" ref="editor"></quill-editor>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      form: {
        content: ''
      },
      rules: {
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { validator: this.checkContentLength, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    checkContentLength(rule, value, callback) {
      const length = this.$refs.editor.getContentLength()
      if (length > 1000) {
        callback(new Error('内容长度不能超过 1000 字符'))
      } else {
        callback()
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  mounted() {
    this.$refs.form.resetFields();
  }
}
</script>

在该示例代码中，我们首先引入了 `vue-quill-editor` 组件，并在 `el-form` 表单组件中使用 `quill-editor` 组件作为富文本编辑器。在表单组件的 `rules` 中，我们定义了一个 `validator` 规则，调用 `checkContentLength` 方法对富文本内容长度进行验证。在 `checkContentLength` 方法中，我们使用 `$refs` 属性获取到富文本编辑器组件实例，并调用其内部的 `getContentLength` 方法获取富文本内容的长度，最后根据长度判断是否超过限制。

当用户输入的富文本内容长度超过限制时，会弹出提示信息。