富文本插件

基础使用

VabQuill的图片上传是直接从本地拿图片转为字节的，需要重新改进封装，将图片上传后，再返回网址，在富文本里显示网址，关键代码：quill配置里的image和imgClick方法

quill配置里的image让VabQuill里的图片上传改为FileUpload组件，imgClick图片回显到content里

template

<el-form-item class="vab-quill-content" label="内容" prop="content">
  <VabQuill
            v-model="form.content"
            style="height:450px"
            :options="options"
            />
  <FileUpload ref="FileUpload" :fileUploadChild1="imgClick" v-on:fileUploadChild2="imgClick" :field="field"  :limit="field.limit"/>
  <!-- field似乎传不过去，还有action的url，没有用，如果要搞这个field得去改下FileUpload -->
</el-form-item>

	created(){
    this.options.modules.toolbar.handlers.image = ()=>{
      var len = this.form.content.split('<img').length -1
      if(len >= this.field.limit){
        this.$baseMessage('已上传最大数', 'none')
      }else{
        this.$refs['FileUpload'].handleShow(len)
      }
    }
  },
  methods: {
    imgClick(data){
      // 把图片链接加到富文本里去，这里可以对图片大小做下限制
      data.map((item)=>{
        this.form.content+=`<img src="${item}"/>`
      })
      this.$refs['FileUpload'].closeShow()
    },

options: this.quill，配置

Vue.prototype.quill = {
  theme: 'snow',
  bounds: document.body,
  debug: 'warn',
  modules: {
		// 工具栏配置
    toolbar: {
      container: [
        ['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'], //清除字体样式
        ['image'] //上传图片、上传视频
      ],
      handlers: {
        'image': () => {
          // var len = this.form.content.split('<img').length -1
          // if(len >= this.field.limit){
          //   this.$baseMessage('已上传最大数', 'none')
          // }else{
          //   this.$refs['FileUpload'].handleShow(len)		
          // ！使用FileUpload组件上传文件
          // }
          // 为什么这里不放，而放在对应页面的created，是因为this的指向问题吗？可以试试
        },
      },
    },
  },
  placeholder: '内容...',
  readOnly: false,
}

富文本展示

仅展示，不编辑，v-html有的时候可能会有一些错乱，直接还是用vabQuill插件：focus事件和改样式

<VabQuill
              class="preview-quill preview-quill-noheight"
              v-model="form.content"
              :options="options"
              v-if="!isNull(form.content)"
              @focus="noEdit($event)"
            />
export function noEdit(editor) {
  editor.enable(false)
}

.preview-quill{
  ::v-deep{
      .ql-toolbar{
          display: none;
      }
      .ql-container{
          height: 686px;
          border: none;
          width: 375px !important;
          max-height:100% !important;
          overflow-y: hidden !important;
      }
  }
}
.preview-quill-noheight{
  ::v-deep{
    .ql-container{
      height: 100% !important;
      min-height:361px !important;
      width: 366px !important;
    }
  }
}
// 移动端
@media screen and (max-width: 1230px) {
  .preview-quill{
    ::v-deep{
        .ql-toolbar{
            display: none;
        }
        .ql-container{
            height: 686px;
            border: none;
            width: 346px !important;
            max-height:100% !important;
            overflow-y: hidden !important;
        }
    }
  }
  .preview-quill-noheight{
    ::v-deep{
      .ql-container{
        width: 305px !important;
      }
    }
  }
}