vue富文本vue-quill-editor

这个富文本需要装一下插件

    "quill": "^1.3.6"

    "quill-image-drop-module": "^1.0.3",   //压缩图片

    "quill-image-resize-module": "^3.0.0", //图片大小控制

    "vue-quill-editor": "^3.0.6",

使用

webpack中加一下配置

  plugins: [

    new webpack.ProvidePlugin({

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

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

    })

  ],

main.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)

页面使用

<template>

        <quill-editor

          v-model="content"

          :content="content"

          :options="editorOption"

          @blur="onEditorBlur($event)"

          @focus="onEditorFocus($event)"

          @ready="onEditorReady($event)">

        </quill-editor>

</template>

<script>

import { 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: `1231`,

      editorOption: {

        modules: {

          history: {

            delay: 1000,

            maxStack: 50,

            userOnly: false

          },

          toolbar: [

            ['bold', 'italic', 'underline', 'strike'],

            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],

            [{ 'list': 'ordered' }, { 'list': 'bullet' }],

            [{ 'script': 'sub' }, { 'script': 'super' }],

            [{ 'indent': '-1' }, { 'indent': '+1' }],

            [{ 'direction': 'rtl' }],

            [{ 'size': ['small', false, 'large', 'huge'] }],

            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            [{ 'font': [] }],

            [{ 'color': [] }, { 'background': [] }],

            [{ 'align': [] }],

            ['clean'],

            ['link', 'image', 'video']

          ],

          imageDrop: true,

          imageResize: {

            displayStyles: {

              backgroundColor: 'black',

              border: 'none',

              color: 'white'

            },

            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]

          }

        }

      }

    }

  },

  methods: {

    onEditorBlur (editor) {

      // console.log('editor blur!', editor)

      console.log(editor)

    },

    onEditorFocus (editor) {

      // console.log('editor focus!', editor)

    },

    onEditorReady (editor) {

      // console.log('editor ready!', editor)

    }

  }

}

</script>

自定义图片上传参考处

          toolbar: {

            container: toolbarOptions,

            handlers: {

              'image': function (value) {

                if (value) {

                  // 调用element UI图片上传

                  document.querySelector('#uploadImg .el-upload').click()

                } else {

                  this.quill.format('image', false)

                }

              }

            }

          },

handers处重写图片的点击事件

触发 element 的 upload的点击事件

upload上传成功的回调事件

    // 图片上传成功方法

    handleSuccess (response, file, fileList) {

      // 获取富文本组件实例

      let quill = this.$refs.QuillEditor.quill

      // 如果上传成功

      if (response) {

        // 获取光标所在位置

        let length = quill.getSelection().index

        // 插入图片，第三个参数为服务器返回的图片链接地址

        quill.insertEmbed(length, 'image', response.data.url)

        // 调整光标到最后

        quill.setSelection(length + 1)

      } else {

        // 提示信息，需引入Message

        alert('图片插入失败')

      }

    }

代码

<template>

  <div class="quill-editor">

    <el-upload

      class="upload-demo"

      action="http://mock/2/api/richUpload"

      accept=".jpg,.jpeg,.png,.gif]"

      :headers="headers"

      :show-file-list="false"

      :on-success="handleSuccess"

      :before-upload="beforeUpload"

      id="uploadImg"

      ref="uploadImg"

      >

      上传

    </el-upload>

    <quill-editor

      v-model="content"

      :content="content"

      :options="editorOption"

      @blur="onEditorBlur($event)"

      @focus="onEditorFocus($event)"

      @ready="onEditorReady($event)"

      ref="QuillEditor">

    </quill-editor>

  </div>

</template>

<script>

import { 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)

const toolbarOptions = [

  ['bold', 'italic', 'underline', 'strike'],

  ['blockquote', 'code-block'],

  // [{ 'header': 1 }, { 'header': 2 }],

  [{ 'list': 'ordered' }, { 'list': 'bullet' }],

  [{ 'script': 'sub' }, { 'script': 'super' }],

  // [{ 'indent': '-1' }, { 'indent': '+1' }],

  // [{ 'direction': 'rtl' }],

  [{ 'size': ['small', false, 'large', 'huge'] }],

  // [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'font': [] }],

  [{ 'color': [] }, { 'background': [] }],

  [{ 'align': [] }],

  // ['clean'],

  ['link', 'image', 'video']

]

export default {

  data () {

    return {

      name: 'register-modules-example',

      content: `1231`,

      editorOption: {

        modules: {

          history: {

            delay: 1000,

            maxStack: 50,

            userOnly: false

          },

          toolbar: {

            container: toolbarOptions,

            handlers: {

              'image': function (value) {

                if (value) {

                  // 调用iview图片上传

                  console.log(document.querySelector('#uploadImg .el-upload'))

                  document.querySelector('#uploadImg .el-upload').click()

                  console.log(value, 1231)

                } else {

                  console.log(212222222222222)

                  this.quill.format('image', false)

                }

              }

            }

          },

          imageDrop: true,

          imageResize: {

            displayStyles: {

              backgroundColor: 'black',

              border: 'none',

              color: 'white'

            },

            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]

          }

        }

      },

      headers: {

        'Authorization': 'Bearer ' + sessionStorage.getItem('token')

      }

    }

  },

  methods: {

    onEditorBlur (editor) {

      // console.log('editor blur!', editor)

      console.log(editor)

    },

    onEditorFocus (editor) {

      // console.log('editor focus!', editor)

    },

    onEditorReady (editor) {

      // console.log('editor ready!', editor)

    },

    // 上传之前加认证信息

    beforeUpload () {

      this.headers.Authorization = 'Bearer ' + sessionStorage.getItem('token')

    },

    // 图片上传成功方法

    handleSuccess (response, file, fileList) {

      // 获取富文本组件实例

      let quill = this.$refs.QuillEditor.quill

      // 如果上传成功

      if (response) {

        // 获取光标所在位置

        let length = quill.getSelection().index

        // 插入图片，res为服务器返回的图片链接地址

        quill.insertEmbed(length, 'image', response.data.url)

        // 调整光标到最后

        quill.setSelection(length + 1)

      } else {

        // 提示信息，需引入Message

        // Message.error('图片插入失败')

        alert('图片插入失败')

      }

    }

  }

}

</script>

tip: 在显示的时候会出现样式丢失的问题，需要加一个 class = "ql-editor"

<div class=" ql-editor" v-html="item.content"></div>

巴特西

vue富文本vue-quill-editor

最新文章

热门文章