vue 富文本组件封装之vue-quill-editor（基于element+nuxt）

一、准备工作：

1、npm install vue-quill-editor quill-image-drop-module quill-image-extend-module quill-image-resize-module

2、文档地址：https://bingkui.gitbooks.io/quill/content/documentation/api/selection.html

二、相关配置

1、nuxt全局引入quill

（1）在plugins文件夹中创建quillEditor.js

import Vue from 'vue'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
if (process.browser) {
// 加一个浏览器端判断，只在浏览器端才渲染就不会报错了const VueQuillEditor = require('vue-quill-editor/dist/ssr')Vue.use(VueQuillEditor)
}

（2）在nuxt.config.js中引入

plugins: [{src: '~/plugins/quillEditor', ssr: false}

三、组件代码

<template>