vue-quill-editor 图片大小控制（拖拽同理）

vue-quill-editor富文本的github地址
https://github.com/surmon-china/vue-quill-editor

先安装npm install vue-quill-editor --save

cnpm install quill-image-resize-module -S    //大小
cnpm install quill-image-drop-module -S     //拖拽好像  我没试

用了sass

npm install node-sass --save-dev
npm install sass-loader --save-dev

在main.js里面引入

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
//一定要引入这三个css，不然文本编辑器会出现不规则黑白几何图形
//这三个css可以在main.js中引入，也可以在具体使用的.vue文件中引入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
Vue.use(VueQuillEditor)

vue-cli2.0

去build文件夹下的webpack.dev.conf.js文件里

在plugins[]里面加上

new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js'
    }),

首先上官网code
https://github.com/surmon-china/vue-quill-editor/blob/master/examples/04-example.vue
官网的demo代码

<template>
  <md-card>
    <md-card-actions>
      <div class="md-subhead">
        <span>04 Example (register modules)</span>
      </div>
      <md-button target="_blank" 
                 class="md-icon-button"
                 href="https://github.com/surmon-china/vue-quill-editor/tree/master/examples/04-example.vue">
        <md-icon>code</md-icon>
      </md-button>
    </md-card-actions>
    <md-card-media>
      <div class="quill-editor-example">
        <!-- quill-editor -->
        <quill-editor v-model="content"
                      :options="editorOption"
                      @blur="onEditorBlur($event)"
                      @focus="onEditorFocus($event)"
                      @ready="onEditorReady($event)">
        </quill-editor>
        <div class="quill-code">
          <div class="title">Code</div>
          <!-- <code class="hljs xml" v-html="contentCode"></code> -->
        </div>
      </div>
    </md-card-media>
  </md-card>
</template>

<script>
  // import hljs from 'highlight.js'
  import VueQuillEditor, { Quill } from 'vue-quill-editor'
  // import { ImageDrop } from 'quill-image-drop-module'
  import ImageResize from 'quill-image-resize-module'
  // Quill.register('modules/imageDrop', ImageDrop)
  Quill.register('modules/imageResize', ImageResize)
  
  export default {
    data() {
      return {
        name: 'register-modules-example',
        content: `<p><img src="/vue-quill-editor/static/images/surmon-6.jpg" width="500"></p>
                  <br>
                  <p><strong><em>Or drag/paste an image here.</em></strong></p>`,
        editorOption: {
          modules: {
            toolbar: [
              [{ 'size': ['small', false, 'large'] }],
              ['bold', 'italic'],
              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
              ['link', 'image']
            ],
            history: {
              delay: 1000,
              maxStack: 50,
              userOnly: false
            },
            imageDrop: true,
            imageResize: {
              displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
              },
              modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
            }
          }
        }
      }
    },
    mounted() {
      this.content = `<p><strong><em>Click on the Image Below to resize!</em></strong></p><br>` + this.content
    },
    computed: {
      // contentCode() {
      //   return hljs.highlightAuto(this.content).value
      // },
    },
    methods: {
      onEditorBlur(editor) {
        // console.log('editor blur!', editor)
      },
      onEditorFocus(editor) {
        // console.log('editor focus!', editor)
      },
      onEditorReady(editor) {
        // console.log('editor ready!', editor)
      }
    }
  }
</script>

<style>
  .quill-editor:not(.bubble) .ql-container,
  .quill-editor:not(.bubble) .ql-container .ql-editor {
    height: 30rem;
    padding-bottom: 1rem;
  }
</style>

<style lang="scss" scoped>
  .quill-editor,
  .quill-code {
    width: 50%;
    float: left;
  }
  .quill-code {
    height: auto;
    border: none;
    > .title {
      border: 1px solid #ccc;
      border-left: none;
      height: 3em;
      line-height: 3em;
      text-indent: 1rem;
      font-weight: bold;
    }
    > code {
      width: 100%;
      margin: 0;
      padding: 1rem;
      border: 1px solid #ccc;
      border-top: none;
      border-left: none;
      border-radius: 0;
      height: 30rem;
      overflow-y: auto;
    }
  }
</style>

vue-cli3.0

自己创建一个vue.config.js文件（和src同级别的）

const webpack = require('webpack')
module.exports = {
	chainWebpack: config => {
		config.plugin('provide').use(webpack.ProvidePlugin, [{
            'window.Quill': 'quill/dist/quill.js',
            'Quill': 'quill/dist/quill.js'
	    }]);
	}
}

其它的和上面一样 就不复制粘贴了~~~~~~~~~~

效果图一张