vue2 中引入vue2-editor

vue2项目使用vue2-editor 富文本

npm地址 www.npmjs.com/package/vue…

quill-image-resize-module www.npmjs.com/package/qui…

直接上代码

• 安装依赖

npm install vue2-editor
or
yarn add vue2-editor

• 页面中引入即可

<template>
  <div id="app">
    <vue-editor v-model="content"></vue-editor>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: {
    VueEditor
  },

  data() {
    return {
      content: "<h1>Some initial content</h1>"
    };
  }
};
</script>

• 现在可以上传图片但是图片不能调整大小有的恶心 使用插件调整图片大小

• 安装插件

npm i quill-image-resize-module

• 配置插件

<template>
  <div id="app">
    <vue-editor
      :editorOptions="editorSettings"
      v-model="content">
  </div>
</template>

<script>
  import { VueEditor, Quill } from 'vue2-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 {
    components: {
      VueEditor
    },
    data() {
      return {
        content: '<h1>Initial Content</h1>',
        editorSettings: {
          modules: {
            imageDrop: true,
            imageResize: {}
          }
        }
      }
    }
  }
</script>

• 遇到问题 （我这边亲测可以使用）

使用 quill-image-resize-module imports错误

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

效果

• 上传视频这个组件一般用不上而且使用的是路径 看着也挺恶心自定义一个工具栏

vue-editor :editorToolbar="customToolbar"> </vue-editor>
customToolbar: [
    ["bold", "italic", "underline", "strike"],
    ["blockquote", "code-block"],
    [{ list: "ordered" }, { list: "bullet" }],
    [{ 'header': 1 }, { 'header': 2 }],
    [{ script: "sub" }, { script: "super" }],
    [{ indent: "-1" }, { indent: "+1" }],
    [{ size: ['small', false, 'large', 'huge']}],
    [{ color: [] }, { background: [] }],
    [{ font: []}], //显示字体选择
    [{ align: [] }], // 对齐方式-----
    ["clean"], // 清除文本格式-----
    ["image", 'link']
],

以上就是一些使用的经验 如需更复杂的功能请参考文档