elementui + Vue-Quill-Editor 富文本编辑器(行高、调整图片大小)

安装

1、安装 quill-editor quill-image-resize-module

cnpm install vue-quill-editor
cnpm install quill
cnpm install quill-image-resize-module --save
cnpm install quill-image-drop-module --save

2.在mian.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.在vue.config.js中

const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      })
    ]
  }
};

4.utils/lineHeight文件中

import Quill from "quill";
let Parchment = Quill.import("parchment");
console.log('Parchment', Parchment);
class lineHeightAttributor extends Parchment.Attributor.Style { }
const lineHeightStyle = new lineHeightAttributor("lineHeight", "line-height", {
    scope: Parchment.Scope.INLINE,
    whitelist: ["initial", "1", "1.5", "1.75", "2", "3", "4"]
});

export { lineHeightStyle };
  1. 全代码





你可能感兴趣的:(vue,富文本编辑器,vue.js)