這里遇到過一個(gè)坑森篷，頁(yè)面內(nèi)使用兩個(gè)富文本編輯器酝陈，v-model綁定同個(gè)data數(shù)據(jù)時(shí)帜矾，輸入會(huì)顯示異常翼虫，輸入內(nèi)容反向，輸入中文時(shí)會(huì)出現(xiàn)拼音（輸入任意內(nèi)容直接顯示）屡萤，綁定不同的data數(shù)據(jù)即可解決

<template>
  <div>
  <el-form :model="ruleForm" :rules="rules" status-icon ref="ruleForm">
    <table class="subTable">
      <col width="20%" />
      <col width="80%" />
      <tbody>
        <tr>
          <td><span class="red">*</span> 標(biāo)題</td>
          <td>
            <el-form-item prop="noticeTitle" :inline-message="true">
                <el-col :xs="{span:14,offset:5}" :sm="{span:8,offset:8}" :md="{span:8,offset:8}" :lg="{span:8,offset:8}" :xl="{span:4,offset:10}">
                    <el-input v-model.trim="ruleForm.noticeTitle" size="small"></el-input>
                </el-col>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td><span class="red">*</span> 公告內(nèi)容</td>
          <td>
          <el-form-item prop="noticeContext">
            <el-col v-loading="quillUpdateImg">
                <quill-editor
                  v-model.trim="ruleForm.noticeContext"
                  ref="myQuillEditor"
                  :options="editorOption"
                >
                </quill-editor>
            </el-col>
           </el-form-item>
          </td>
        </tr>
        <tr>
          <td>默認(rèn)內(nèi)容</td>
          <td>
          <el-form-item prop="">
            <el-col v-loading="quillUpdateImg">
                <quill-editor
                  v-model.trim="defaultContent"
                  ref="myQuillEditor"
                  :options="editorOption"
                >
                </quill-editor>
            </el-col>
           </el-form-item>
          </td>
        </tr>
      </tbody>
    </table>
    <el-form-item>
      <el-col class="sfooter">
         <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
         <el-button @click="$router.go(-1);">取消</el-button>
      </el-col>
    </el-form-item>
  </el-form>
    <el-upload
            class="avatar-uploader"
            action=""
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="beforeUpload">
    </el-upload>
  </div>
</template>
<script>
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import { quillEditor } from 'vue-quill-editor'
  export default {
    components: {quillEditor},
    data() {
      var container =[
          ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
          ['blockquote', 'code-block'],

          [{'header': 1}, {'header': 2}],               // custom button values
          [{'list': 'ordered'}, {'list': 'bullet'}],
          [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
          [{'direction': 'rtl'}],                         // text direction

          [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
          [{'header': [1, 2, 3, 4, 5, 6, false]}],

          [{'color': []}, {'background': []}],          // dropdown with defaults from theme
          [{'font': []}],
          [{'align': []}],
          ['link', 'image'],
          ['clean']                                         // remove formatting button
      ]
      return {
        ruleForm:{
            noticeTitle:'',
            noticeContext:'',
            htmlLink:''
        },
        rules:{
            noticeTitle:[
                { required: true,message: '請(qǐng)?zhí)顚憳?biāo)題', trigger: 'blur' }
            ],
            noticeContext:[
                { required: true,message: '請(qǐng)?zhí)顚懝鎯?nèi)容', trigger: 'blur' }
            ]
        },
       quillUpdateImg:false,
       defaultContent: 'XXX',
        // 富文本框參數(shù)設(shè)置
        editorOption: {  
          modules: {
            toolbar: {
              container: container,
              handlers: {
                'image': function (value) {
                    console.log(value)
                  if (value) {
                        document.querySelector('.avatar-uploader input').click()
                  } else {
                        this.quill.format('image', false);
                  }
                }
              }
            }
          }
        }
      }
    },
    created(){
        
    },
    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                console.log(this.ruleForm);
              } else {
                console.log('error submit!!');
                return false;
              }
            });
         },
        beforeUpload() {
            // 顯示loading動(dòng)畫
            this.quillUpdateImg = true
        },
        
        uploadSuccess(res, file) {
  
            // 獲取富文本組件實(shí)例
            let quill = this.$refs.myQuillEditor.quill
            // 如果上傳成功
            if (res.state === 'SUCCESS' && res.url !== null) {
                // 獲取光標(biāo)所在位置
                let length = quill.getSelection().index;
                // 插入圖片  res.info為服務(wù)器返回的圖片地址
                quill.insertEmbed(length, 'image', res.url)
                // 調(diào)整光標(biāo)到最后
                quill.setSelection(length + 1)
            } else {
                this.$message.error('圖片插入失敗')
            }
            // loading動(dòng)畫消失
            this.quillUpdateImg = false
        },
   
        uploadError() {
            // loading動(dòng)畫消失
            this.quillUpdateImg = false
            this.$message.error('圖片插入失敗')
        }
    }
  }
</script>

<style scoped lang="scss">
 

.limit {
  height: 30px;
  border: 1px solid #ccc;
  line-height: 30px;
  text-align: right;

  span {
    color: #ee2a7b;
  }
}

.ql-snow .ql-editor img {
  max-width: 480px;
}

.ql-editor .ql-video {
  max-width: 480px;
}
.el-form{
    padding: 15px 20px;
  }
  .line {
    text-align: center;
  }
  table.subTable {
    width: 100%;
    border-collapse:collapse;
    font-size: 14px;
    color:#909399;
    text-align:center;
  }
  table.subTable th, table.subTable td {
    border: 1px solid #ebeef5;
    padding: 20px ;
  }
  .tableTile {
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    padding:15px;
    color:#000;
    text-align: center;
  }

  .el-form-item {
    margin-bottom: 0;
  }
  .red {
      color:#f56c6c;
    }
   .sfooter {
    text-align: center;
    margin-top: 20px;
   }
   .message {
    margin-bottom: 10px;
   }

</style>
<style>
  .ql-toolbar.ql-snow {
    text-align:left;
  }  
 .ql-editor {
    min-height: 185px;

  }
  table.subTable .el-form-item__content {
    line-height:20px;
   }
</style>