富文本编辑器的必填校验

安装富文本编辑器  npm install @wangeditor/editor --save

全局引入样式 （main.js文件中引入）  import '@wangeditor/editor/dist/css/style.css'

下面是链接

https://www.wangeditor.com/v5/installation.html

项目场景：

---

问题描述

当编辑框为空的的时候，并没有触发必填校验

原因分析：

提示：这里填写问题的分析：

富文本编辑器在为空的时候，也是有标签的，默认标签是p标签，也有可能时选择的h1标签（或者

是别的标签）但是h1标签可能还没输入内容，所以，表单验证要验证富文本编辑框里面的内容

可以使用 this.editor.getText().trim().length>0 来判断富文本编辑框是否有内容

---

解决方案：

提示：这里填写该问题的具体解决方案：

 1：富文本编辑框组件

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      ref="vueEditor"
      style="height: 200px; overflow-y: hidden"
      v-model="editorText"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
  </div>
</template>

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

export default {
  props: {
    editorContent:{
      type:String||Object
    }
  },
  name: "index",
  components: {
    Editor,
    Toolbar,
  },
  data() {
    return {
      service_url: process.env.VUE_APP_BASE_API,
      toolbarConfig: {
        toolbarKeys: [
          "headerSelect",
          "fontSize",
          "fontFamily",
          "lineHeight",
          "color",
          "justifyLeft",
          "justifyRight",
          "justifyCenter",
          "bold",
          "italic",
          "color",
          "clearStyle",
          "indent",
          "delIndent",
          //   'imageWidth30', 'imageWidth50', 'imageWidth100', 'divider', 'emotion', 'insertLink', 'editLink', 'unLink',
          //   'viewLink', 'codeBlock', 'blockquote', 'headerSelect', 'header1', 'header2', 'header3', 'header4', 'header5',
          //   'todo', 'redo', 'undo', 'fullScreen', 'enter', 'bulletedList', 'numberedList', 'insertTable', 'deleteTable',
          //   'insertTableRow', 'deleteTableRow', 'insertTableCol', 'deleteTableCol', 'tableHeader', 'tableFullWidth',
          //   'insertVideo', 'uploadVideo', 'editVideoSize', 'uploadImage', 'codeSelectLang'
        ],
      },
      editor: {},
      mode: "default",
      editorText:"",
      editorConfig: {},
    };
  },
  watch: {
    "editorContent":function(val){
      if(val!=""){
        this.editorText=val;
      }
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor);
    },
    
    onChange(val) {
      // this.editor.getText() 获取富文本编辑器的内容 .trim() 去掉空格
      console.log("111111",this.editor.getText().trim().length)
      if(this.editor.getText().trim().length>0){//如果编辑框有内容
        this.$emit("changeContent", this.editorText);
      }else{//如果编辑框没有内容
        this.$emit("changeContent", "");
      }
    }
  },
};
</script>

<style scoped></style>

2：富文本编辑框组件传过来change事件带过来的值赋值给表单，然后监听表单的值

<template>
  <div class="container">
    <!-- 表单 -->
    <el-card shadow="always" class="marginTB20">
      <el-form 
        :model="addPayOffForm" 
        :rules="addPayOffRules" 
        ref="addPayOffForm" 
        :disabled="false"
        label-width="190px">
        <el-form-item label="申请事由" prop="summaryPaymentContent">
          <WangEditor 
            :editorContent="addPayOffForm.summaryPaymentContent"
            @changeContent="changeContent"></WangEditor>
        </el-form-item> 
      </el-form>
    </el-card>
  </div>
</template>
<script>
import WangEditor from "./wangEditor.vue";
export default {
  components: {
    WangEditor,
  },
  data () {
    return {
      addPayOffForm:{
        summaryPaymentContent:``,
      },
      addPayOffRules:{
        summaryPaymentContent:[
          { required: true, message: "请输入，不可为空", trigger: "change" },
        ],
      },
    };
  },
  created () {},
  watch: {
    "addPayOffForm.summaryPaymentContent":function (newVAl,oldVal){
      this.$refs.addPayOffForm.validateField('summaryPaymentContent');
    },
  },
  methods:{
    // 获取富文本内容 
    changeContent(val){
      this.addPayOffForm.summaryPaymentContent=val;
    },
    
  }
}
</script>
<style scoped >

</style>

3：在其他位置返显富文本编辑器的的内容要用v-html=""

<div class="" v-html="basicInfoATable.summaryPaymentContent"></div>