Vue 中使用 quill-editor 富文本,并结合elemnt ui 上传图片 并调整图片大小

1.安装

安装依赖包,包含编辑器包,拖拽包,缩放包 (拖拽包因为无法和element ui 配合且上传的是Base 64 格式的这里就看个人需求)

npm i vue-quill-editor quill quill-image-drop-module quill-image-resize-module --save 

2.main.js 引用

import VueQuillEditor from 'vue-quill-editor'

import * as Quill from 'quill'; // 富文本基于quill

import imageResize from 'quill-image-resize-module' // 图片缩放组件。

import { ImageDrop } from 'quill-image-drop-module'; // 图片拖动组件。

Quill.register('modules/imageDrop', ImageDrop);

Quill.register('modules/imageResize', imageResize)

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

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

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

Vue.use(VueQuillEditor);

3.配置文件

webpack.base.conf.js配置

const webpack = require('webpack');  //加入

module.exports里面加

plugins: [

      new webpack.ProvidePlugin({

        'window.Quill': 'quill/dist/quill.js',

        'Quill': 'quill/dist/quill.js'

      })

    ],


rules 里面加

  {

        test: /\.js$/,

        exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/,

        loader: 'babel-loader'

      }




4.修改原版部分样式(复制到App.vue)

.editor {

    line-height: normal !important;

    height: 800px;

  }

  .ql-snow .ql-tooltip[data-mode=link]::before {

    content: "请输入链接地址:";

  }

  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {

      border-right: 0px;

      content: '保存';

      padding-right: 0px;

  }


  .ql-snow .ql-tooltip[data-mode=video]::before {

      content: "请输入视频地址:";

  }


  .ql-snow .ql-picker.ql-size .ql-picker-label::before,

  .ql-snow .ql-picker.ql-size .ql-picker-item::before {

    content: '14px';

  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,

  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {

    content: '10px';

  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,

  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {

    content: '18px';

  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,

  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {

    content: '32px';

  }


  .ql-snow .ql-picker.ql-header .ql-picker-label::before,

  .ql-snow .ql-picker.ql-header .ql-picker-item::before {

    content: '文本';

  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,

  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {

    content: '标题1';

  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,

  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {

    content: '标题2';

  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,

  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {

    content: '标题3';

  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,

  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {

    content: '标题4';

  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,

  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {

    content: '标题5';

  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,

  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {

    content: '标题6';

  }


  .ql-snow .ql-picker.ql-font .ql-picker-label::before,

  .ql-snow .ql-picker.ql-font .ql-picker-item::before {

    content: '标准字体';

  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,

  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {

    content: '衬线字体';

  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,

  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {

    content: '等宽字体';

  }


5.页面中使用:

  

.GzGl{

  padding: 5px 10px;

}

.GzGlTit{

  padding-top: 7px;

  padding-bottom: 15px;

  margin-bottom: 20px;

}



5.效果图


你可能感兴趣的:(Vue 中使用 quill-editor 富文本,并结合elemnt ui 上传图片 并调整图片大小)