elementUI + vue-quill-editor富文本编

这里遇到过一个坑，页面内使用两个富文本编辑器，v-model绑定同个data数据时，输入会显示异常，输入内容反向，输入中文时会出现拼音（输入任意内容直接显示），绑定不同的data数据即可解决

<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> 标题</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> 公告内容</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>默认内容</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: '请填写标题', trigger: 'blur' }
            ],
            noticeContext:[
                { required: true,message: '请填写公告内容', trigger: 'blur' }
            ]
        },
       quillUpdateImg:false,
       defaultContent: 'XXX',
        // 富文本框参数设置
        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动画
            this.quillUpdateImg = true
        },
        
        uploadSuccess(res, file) {
  
            // 获取富文本组件实例
            let quill = this.$refs.myQuillEditor.quill
            // 如果上传成功
            if (res.state === 'SUCCESS' && res.url !== null) {
                // 获取光标所在位置
                let length = quill.getSelection().index;
                // 插入图片  res.info为服务器返回的图片地址
                quill.insertEmbed(length, 'image', res.url)
                // 调整光标到最后
                quill.setSelection(length + 1)
            } else {
                this.$message.error('图片插入失败')
            }
            // loading动画消失
            this.quillUpdateImg = false
        },
   
        uploadError() {
            // loading动画消失
            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>