RMS-FrontEnd/RMS-FrontEnd/src/views/components/common/RichText/index.vue

<template>
    <div class="boxs">
      <!-- <el-upload
        class="avatar-uploader"
        name="file"
        action=""
        :show-file-list="false"
        :data="uploadData"
        :http-request="uploadHttpRequest"
      >
      </el-upload> -->
      <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="saveHtml" @change="saveHtml1" @focus="getFocus"></quill-editor>
      <!-- 富文本内容 -->
    </div>
</template> 
<script>
  import { quillEditor } from "vue-quill-editor";
  import ImageBlot from './reviewClass'
  // 工具栏配置
//   const toolbarOptions = [
//     ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
//     ["blockquote", "code-block"], // 引用  代码块
//     [{ header: 1 }, { header: 2 }], // 1、2 级标题
//     [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
//     [{ script: "sub" }, { script: "super" }], // 上标/下标
//     [{ indent: "-1" }, { indent: "+1" }], // 缩进
//     // [{'direction': 'rtl'}],                         // 文本方向
//     [{ size: ["small", false, "large", "huge"] }], // 字体大小
//     [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
//     [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
//     [{ font: [] }], // 字体种类
//     [{ align: [] }], // 对齐方式
//     ["clean"], // 清除文本格式
//     ["link", "image", "video"], // 链接、图片、视频
//   ];
  export default {
    props:{
        value:{
            type:String,
            default:(value)=>{
                if(!value){
                  return ""
                }
                
            }
        },
        placeholder:{
            type:String,
            default:()=>{
                return "请输入"
            }
        },
        filed:{
            type:String,
            default:()=>{
                return ''
            }
        },
        keys:{
          type:String,
          default:()=>{
            const len = 6
            const codeList = []
            const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'
            const charsLen = chars.length
            for (let i = 0; i < len; i++) {
              codeList.push(chars.charAt(Math.floor(Math.random() * charsLen)))
            }
            return  codeList.join('')
          }
        }
    },
    data() {
      return {
        uploadData: {}, // 图片文件
        content: this.value||"", // 内容
        // content: null,
        editorOption: {
          placeholder: this.placeholder,
          key:this.keys,
        //   modules: {
        //     toolbar: {
        //       container: toolbarOptions,
        //       handlers: {
        //         image: function (value) {
        //           if (value) {
        //             // 触发input框选择图片文件
        //             document.querySelector(".avatar-uploader input").click();
        //           } else {
        //             this.quill.format("image", false);
        //           }
        //         },
        //       },
        //     },
        //   },
        },
      };
    },
    watch:{
        value(val){
          var a = this.content.replace(/<p>|<\/p>/g,'')
            if(a!=val){
              this.content = val
            }
        },
    },
    computed:{
      quill(){
        return this.$refs.myQuillEditor.quill
      }
    },
    mounted() {
      // let quill = this.$refs.myQuillEditor.quill
      // this.quill.enable(false)
      //     this.$nextTick(()=>{
            this.quill.enable(true)
          // })
      this.$forceUpdate()
      this.quill.root.addEventListener('paste', evt => {
        if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
          evt.preventDefault();
          [].forEach.call(evt.clipboardData.files,async file => {
            if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
              return
            }
          // 获取光标所在位置
          let length = this.quill.selection.savedRange.index
          var str = await this.fileToBase64(file)
          this.quill.insertEmbed(length, 'image',{
            url:str,
            width:'',
            height:'',
            style:'width:80px;height: 80px;border: 1px solid #f9f6f675;vertical-align:middle'
          })
          this.quill.setSelection(length + 2)
          })
        }
      }, false)
    },
    methods: {
      // 将file文件上传转化为base64进行显示
        fileToBase64(file) {
            return new Promise((resolve, reject) => {
                ///FileReader类就是专门用来读文件的
                const reader = new FileReader()
                //开始读文件
                reader.readAsDataURL(file)
                reader.onload = () => resolve(reader.result)
                // 失败返回失败的信息
                reader.onerror = error => reject(error)
            })
        },
      //失去焦点
      saveHtml(event) {
        // this.quill.enable(false)
        // console.log("this.content", this.content);
        // this.content = this.content.replace(/<p>|<\/p>/g,'')
        //   this.$emit('input',this.content)
        //   this.$nextTick(()=>{
        //     this.quill.enable(true)
        //   })
          
        // this.$emit('value',{
        //     filed:this.filed,
        //     content:this.content
        // })
      },
      //值变化
      saveHtml1(event) {
        var a = this.content.replace(/<p>|<\/p>/g,'')
          this.$emit('input',a)
      },
      getFocus(){
            this.quill.enable(true)
      },
    },
  };
</script> 
<style lang="scss">
  .boxs {
    /* line-height: normal !important;
    height: 500px;
    width: 700px;
    margin: 20px auto; */
    .ql-toolbar{
        display: none;
    }
    .quill-editor{
        border:1px solid #dcdfe6;
        border-radius: 5px;
       .ql-container
       {
        border:0;
        .ql-editor{
          display: flex;
          align-items: end;
        }
       }
    }
    .ql-editor.ql-blank::before {
        font-style: normal;
      }

  }
</style>