vue-quill-editor 的使用方法

官方文档：https://www.npmjs.com/package/vue-quill-editor
gitHub地址：https://github.com/surmon-china/vue-quill-editor
参考地址：https://www.jianshu.com/p/a6cba69d6e49

安装依赖

cnpm install vue-quill-editor --save

引用方式

• 全局引用，项目入口文件中（main.js）注册

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

• 局部引用，在需要调用的vue页面中声明

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
  }
}

完成上述步骤之后即可使用

使用方法

<Upload
   id="iviewUp"
   :show-upload-list="false"
   :on-success="handleSuccessQuill"
   :format="['jpg','jpeg','png','gif']"
   name="richTextAccessory"
   :max-size="2048"
   multiple
   :action="uploadRichTextImg"
   style="display:none;">
   <Button icon="ios-cloud-upload-outline" ></Button>
 </Upload>
 <quill-editor
   v-model="form.subContent"
   ref="myQuillEditor"
   :options="editorOption"
   placeholder="请输入公告内容"
   @change="onEditorChange($event)"
 />

其中图片上传用 iview 中的 Upload 组件完成

import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: 'Ggxz',
  components: {
    quillEditor
  },
  data() {
    const toolbarOptions = [
      ['bold', 'italic', 'underline'],
      [{ size: ['small', false, 'large', 'huge'] }],
      [{ color: [] }, { background: [] }],
      [{ font: [] }],
      [{ align: [] }],
      ['image']
    ]
    return {
      uploadRichTextImg: '', // 上传图片地址接口
      uploadList: [], // 富文本编辑器的图文列表
      content: '', // 富文本里的内容
      editorOption: { // 富文本编辑器的工具栏
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function(value) { // 对图片进行改造，默认是通过base64 ,现通过iview 去传。
                if (value) {
                  document.querySelector('#iviewUp input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        },
        imageResize: {}, // 自定义拉伸
        placeholder: '请输入公告内容'
      }
    }
  },
  methods: {
  	onEditorChange(e) {
      const _this = this
      _this.content = e.html // 标签以
 形式渲染 （重点）
      _this.contentTxt = e.text.substr(0, 100)
    },
    handleSuccessQuill(res) {
      // 获取富文本组件实例
      const quill = this.$refs.myQuillEditor.quill
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        const length = quill.getSelection().index
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', res.data.path)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        // 提示信息，需引入Message
        this.$Message.error('图片插入失败')
      }
    }
  }
}

配置项请参考官网，效果如下图

但是保存成功之后你会发现一些样式是用 ql开头的

我们该如何显示呢

展示方法

在需要显示的页面，写入代码：（如果你是单页面引入的，记得在显示页面中再次引入样式）

<div class="ql-container ql-snow">
  <div class="content ql-editor" v-html="infoList.subContent" />
 </div>

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

页面展示如下图