Nuxt中使用vue-quill-editor

vue-quil-editor是一个vue的富文本编辑器插件，功能很丰富，使用起来也很方便。本文就说一下在nuxt中的使用方法。

1、安装

npm install vue-quill-editor --save

2、新建plugins/vue-quill-editor.js文件

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor/dist/ssr'
Vue.use(VueQuillEditor);

3、配置nuxt.config.js

module.exports = {
  // other config
  // ...
  // import css files as global style
  css: [
    'quill/dist/quill.snow.css',
    'quill/dist/quill.bubble.css',
    'quill/dist/quill.core.css'
  ],

  plugins: [
    // other plugins
    {
      src: '~/plugins/vue-quill-editor',
      ssr: false
    }
  ]
}

4、组件中使用

<template>
  <section class="container">
    <div class="quill-editor" 
         :content="content"
         @change="onEditorChange($event)"
         @blur="onEditorBlur($event)"
         @focus="onEditorFocus($event)"
         @ready="onEditorReady($event)"
         v-quill:myQuillEditor="editorOption">
    </div>
  </section>
</template>

<script>
  export default {
    data () {
      return {
        content: '<p>I am Example</p>',
        editorOption: {
          // some quill options
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block']
            ]
          }
        }
      }
    },
   
    methods: {
      onEditorBlur(editor) {
        console.log('editor blur!', editor)
      },
      onEditorFocus(editor) {
        console.log('editor focus!', editor)
      },
      onEditorReady(editor) {
        console.log('editor ready!', editor)
      },
      onEditorChange({ editor, html, text }) {
        console.log('editor change!', editor, html, text)
        this.content = html
      }
    }
  }
</script>
<style lang="scss" scoped>
  .container {
    width: 60%;
    margin: 0 auto;
    padding: 50px 0;
    .quill-editor {
      min-height: 200px;
      max-height: 400px;
      overflow-y: auto;
    }
  }
</style>

ok，到这里就可以正常使用vue-quill-editor了，上面的代码中只写很少的配置项，插件本身有很多功能，可以去vue-quill-editor查看。
富文本都有插入图片的功能，vue-quill-editor默认的插入图片是以base64形式插入的，如果图片过大，会使文本内容过长，非常不好，所以我们可以修改默认的方式，使用src的方式插入图片。

---

1、在编辑器附近或者页面任意地方，新增一个文件上传输入框

<input
  type="file"
  style="display: none;"
  id="getFile"
  @change="selectContentImg($event)"
  accept="image/gif,image/jpeg,image/jpg,image/png"
>

2、修改vue-quill-editor的配置

editorOption: {
  // some quill options
  modules: {
    toolbar: {
      container: [
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block'],
        ['image']
      ],
      handlers: {
        'image': function () {
          // 意思是使用插入图片的功能时候，触发文件上传控件的点击事件
          document.getElementById('getFile').click();
        }
      }
    }
  }
}

3、上传文件

// 选择图片之后的处理
selectContentImg(e) {
  let file = e.target.files;
  if (file.length > 0) {
    let data = new FormData();
    for (let item of file) {
      data.append('files', item)
    }
    // 可以使用post方法上传文件到服务器
    // 然后把返回的路径拼接好插入到内容里
    uploadFile(data).then(res => {
      this.content += `<img src="${res.imgUrl}" alt="内容图片">`;
    })
  }
}