element-ui vue 使用富文本编辑器

1、html

     <el-form-item label="商品参数" prop="parameter">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="update" />
            <Editor
              style="height: 300px; width: 100%"
              v-model="goodsData.parameter"
              :defaultConfig="editorConfigAll"
              @onCreated="onUpdated"
            />
          </el-form-item>

2、引入 (首先要下载 npm i .....)

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

3、

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

const goodsDatas = {
  parameter: ""
};

4、

  components: { Editor, Toolbar },

5、

onUpdated(update) {
      this.update = Object.seal(update);
    },

6、自定义表单定义 （在data里）

// 自定义表单校验函数
    const checkDescAll = (rule, value, callback) => {
      const that = this;
      if (
        that.goodsData.parameter === "" ||
        that.goodsData.parameter == "<p>请输入商品参数</p>"
      ) {
        return callback(new Error("请输入商品参数"));
      }
      // 表单校验通过
      callback();
    };

7、也在data里

    editorConfig: { placeholder: "请输入商品介绍" },
 
      // 表单校验规格
      rules: {
        parameter: { validator: checkDescAll, trigger: "blur" ,required:true},
      },

8、

 <el-form
      ref="goodsForm"
      :rules="rules"
      :model="goodsDatas"
      style="width: 900px"
    >