Quill富文本编辑器

// html代码
<view v-model="content" class="kindeditor-component" style="width: 625px; height: 302px;">
  <view id="editor">
  </view>
</view>


// 引入
// 富文本
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Quill from 'quill'


data(){
  return {
    content: '',
    
    // 富文本配置
    quillEditor: null,
    quillEditorToolbarOptions: [
      { 'size': ['small', false, 'large', 'huge'] },
      'bold', 'italic', 'underline', 
      {
        'align': ''
      },
      {
        'align': 'center'
      },
      {
        'align': 'right'
      },
    
      {
        'list': 'ordered'
      }, 
      {
        'list': 'bullet'
      },
      'clean'
      // 'image'
    ],
  }
}


mounted() {
  // 确保获取到id="editor"
  this.$nextTick(()=> {
      setTimeout(()=> {
          if(document.getElementById('editor')) {
            this.quillEditorHandle();
          }
      })
  })
},


methods: {
  quillEditorHandle() {
    this.quillEditor = new Quill('#editor', {
      modules: {
        toolbar: this.quillEditorToolbarOptions
      },
      theme: 'snow'
    })
    // 需要上传图片时，可以写一个图片上传，通过富文本框中的图片按钮引用
    // this.quillEditor.getModule('toolbar').addHandler('image', () => {
    //   this.$refs.uploadBtn.$el.click()
    // })
    // 监听内容变化，动态赋值
    this.quillEditor.on('text-change', () => {
      this.form.content = this.quillEditor.root.innerHTML
    })
    this.quillEditor.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
      delta.ops = delta.ops.map(op => {
        return {
          insert: op.insert
        }
      })
      return delta
    })
  },
  
  // 详情接口-富文本回显
  detail(){
    this.quillEditor.root.innerHTML = 接口返回的富文本内容
    this.quillEditor.on('text-change', () => {
      this.form.content = this.quillEditor.root.innerHTML  //等号前面是页面需要渲染的变量
    })
  }
}


// css代码
// 富文本

// 字体设置 - 字体设置只有添加如下几行css代码，才能正常使用
/deep/{
  .ql-snow .ql-picker.ql-size {
    position: absolute;
    left: 根据需要设置;
  }
}

/deep/.ql-stroke{
   color: #000;
}

/deep/ svg {
  width: 16px;
  color: #000000;
}

/deep/ .ql-bold,
/deep/ .ql-italic,
/deep/ .ql-underline,
/deep/ .ql-align,
/deep/ .ql-list{
  border: 1px solid #fff;
  background-color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  cursor: pointer;
  border-right: 1px solid #a0a0a0;
}
/deep/ .ql-list:last-child{
  border-right: none;
}
 
/deep/ .ql-toolbar{
  padding: 0;
  height: 30px;
}
/deep/ .ql-formats{
  height: 20px;
  line-height: 20px;
  margin-top: -18px;
}
/deep/.ql-snow {
  border: none;
}
/deep/.ql-toolbar{
  border-bottom: 1px solid #ccc;
  height: 27px;
  padding: 2px 5px !important;
  overflow: hidden;
}

/deep/.ql-snow{
  padding: 10px 10px 37px 10px;
}

/deep/ #editor p{
  line-height: normal;
  white-space: normal;
  font-size: 14px;
}
/deep/ #editor .ql-editor ul{
  line-height: normal;
}

/deep/ #editor .ql-editor ol{
  line-height: normal;
}
/deep/ .ql-clean{
  border: none;
  background: #fff;
  border-right: 1px solid #a0a0a0;
}  

.kindeditor-component{
  width: 625px;
  height: 302px;
  border: 1px solid #ccc; 
  box-sizing: border-box;
}

文本形式回显富文本框中的内容：

<view v-html="content"></view>

data() {
  return {
    content: ''
  };
},

detail(){
  // 接口中获取富文本内容
  preachReview.detailReview().then(res=>{
    if(res.code == 0){
      this.form.content = res.data.mdText
    }
  })
},

<style scoped lang="scss">
  // 设置富文本字体大小，确保 'size': ['small', false, 'large', 'huge']在回显时起作用
  // 在富文本内回显时，不用设置以下样式，因为富文本组件已经做了该操作
  /deep/.ql-size-small{
    font-size: 0.75em;
  }
  /deep/.ql-size-large{
    font-size: 1.5em;
  }
  /deep/.ql-size-huge{
    font-size: 2.5em;
  }
</style>