vue2使用富文本编辑器vue-quill-editor

效果图：

 1. 安装vue-quill-editor

npm install vue-quill-editor -S

2. 全局引入在main.js 中写入

// 富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

3. 再页面中引入

4.  更改插入图片大小、  安装

npm install quill
npm install quill-image-resize-module --save
npm install quill-image-drop-module --save

5. main.js引入

// 富文本图片大小
import imageResize  from 'quill-image-resize-module' // 调整大小组件。
import { ImageDrop } from 'quill-image-drop-module'; // 拖动加载图片组件。
Quill.register('modules/imageResize', imageResize );
Quill.register('modules/imageDrop', ImageDrop);

6. 在vue.config.js文件中引入

//下载 webpack
npm install webpack -s

// vue.config.js :

const webpack = require('webpack');
module.exports = {
  configureWebpack: {
    // 在这里添加你的自定义Webpack配置
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      })
    ]
  }
};

配置完成后记得重启一下

 7. 在页面中显示样式

8. 图片适配PC后，手机端显示太大，如果只有一处调用就在页面中添加css样式，如何多次调用在app.vue中添加css样式 

/* PC端样式 */
@media (min-width: 768px) {
  .ql-editor img {
    max-width: 100%;
    height: auto;
  }
}

/* 手机端样式 */
@media (max-width: 767px) {
  .ql-editor img {
    width: 100%;
    height: auto;
  }
}

9. 如果富文本编辑器内容过多，会将富文本编辑器功能按钮移除屏幕

解决方法，固定高度，使用默认滚动条

.ql-toolbar.ql-snow+.ql-container.ql-snow {
    height: 600px;
}