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代码








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'
	    }]);
	}
}

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

效果图一张

vue-quill-editor 图片大小控制(拖拽同理)_第1张图片

你可能感兴趣的:(vue)