乐趣区

vuequillivewupload七牛实现富文本编辑器上传图片到七牛并可以调整图片大小

jiezi


1、下载安装必须插件 

cnpm i vue-quill-editor -S
// 可拖拽图片
cnpm i quill-image-drop-module -S
// 这两个是改变图片大小的
cnpm i quill-image-resize-module -S

2、引入 html 内容 

<div id='quillEditorQiniu'>
    <quill-editor
      :style="'width:'100%'"v-model="content"ref="myQuillEditor":options="editorOption"@change="onEditorChange($event)"
    >
    </quill-editor>
    <Upload
      class="avatar-uploader"
      :accept="'image/*'"
      :action="'https://upload.qiniup.com'"
      name='file'
      :data="updateParams"
      :show-upload-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    >
    </Upload>

注意如果想看 upload 详细讲解可以看我上一片文章：https://segmentfault.com/a/1190000021073631
3、首先配置工具栏显示图标 

const toolbarOptions = [['bold', 'italic', 'underline', 'strike'],
  [{'color': []}, {'size': fontSizeStyle.whitelist}],
  [{list: 'ordered'}, {list: 'bullet'}],
  [{indent: '-1'}, {indent: '+1'}],
  ['link', 'image']
]

4、这里的其他图标都是系统给的，只有“size”字体选择下拉框，是我自己配置的，因为默认只有三种字体大小，我们需要扩展, 在 Quill 上注册字体：

import {quillEditor} from 'vue-quill-editor'
// 富文本编辑器 quill editor 样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import * as Quill from 'quill'
let fontSizeStyle = Quill.import('attributors/style/size')
fontSizeStyle.whitelist = ['12px', '14px', '16px', '20px', '24px', '36px']
Quill.register(fontSizeStyle, true)

5、使用配置项 

data () {
    return {
        editorOption: {
        placeholder: '请输入',
        theme: 'snow',
        modules: {
          toolbar: {container: toolbarOptions}
        }
      },
    }
}

6、还需要修改 css 文件，我们最好建一个全局 css 覆盖 quill 的 css 样式 

.ql-editor{min-height:150px;}
.ql-snow .ql-tooltip[data-mode=link]::before {content: "请输入链接地址:";}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=video]::before {content: "请输入视频地址:";}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {content: '14px';}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {content: '10px';}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {content: '18px';}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {content: '32px';}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {content: '文本';}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {content: '标题 1';}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {content: '标题 2';}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {content: '标题 3';}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {content: '标题 4';}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {content: '标题 5';}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {content: '标题 6';}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {content: '标准字体';}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {content: '衬线字体';}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {content: '等宽字体';}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.ql-toolbar.ql-snow {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.ql-snow .ql-stroke,
.ql-snow .ql-picker {
  color: #999;
  stroke: #999;
}
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill {fill: #999;}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {content: '12px';}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {content: '14px';}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {content: '16px';}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {content: '20px';}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {content: '24px';}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {content: '36px';}
.ql-container {font-size:14px;}
到这里我们富文本编辑器的字体就配置好了，下来我们配置插入图片上传七牛，并调整图片的大小。

1、导入需要的 js

import {quillEditor} from 'vue-quill-editor'
import * as Quill from 'quill'
import {ImageDrop} from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

2、配置 build/webpack.dev.config/webpack.pro.config.js，plugins:[] 中加入以下代码~~~~

new webpack.ProvidePlugin({
  'window.Quill': 'quill/dist/quill.js',
  'Quill': 'quill/dist/quill.js'
})
这样就可以调整图片尺寸了
接下来我们将图片上传到七牛服务器，并且将地址插入到富文本编辑器中。

1、我们监听点击富文本编辑器上面的图片被单击的时候，触发我们的上传组件被单击，打开上传窗口。

 mounted () {
    // 工具栏中的图片图标被单击的时候调用这个方法
    let imgHandler = (state) => {if (state) {document.querySelector('.avatar-uploader input').click()}
    }
    // 当工具栏中的图片图标被单击的时候
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', imgHandler)
  },

2、上传组件，上传图片到七牛，成功以后获取到上传图片的地址，插入到富文本编辑器中 

<Upload
      class="avatar-uploader"
      :accept="'image/*'"
      :action="'https://upload.qiniup.com'"
      // 注意 name 必须是 file，之前写的 img，七牛老报错，说是 multiple 什么的 name 必须是 file。name='file'
      :data="updateParams"
      :show-upload-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    >

这里:action 是七牛服务器地址，我们需要在 beforeUpload() 钩子函数中传递两个参数（token：后台接口获取，key：文件名称），然后在 successUpload() 钩子函数中获取到上传图片地址，直接插入到富文本编辑器就可以了。

beforeUpload (request, file) {
      // 设置上传参数
      this.updateParams.token = this.$store.state.upload_token
      this.updateParams.key = request.name
    },
 uploadSuccess (res, file) {
      // file 返回的文件信息，也可以在这里调用七牛上传。console.log(res, file, this.$store.getters.upload_url + res.key, 'success')
      // 上传完成以后修改图片地址，回显到 quill 编辑器中
      let quill = this.$refs.myQuillEditor.quill
      let length = quill.getSelection() ? quill.getSelection().index : 0
      // 插入图片  res.info 为服务器返回的图片地址
      console.log(this.$store.getters.upload_url + file.name)
      // quill.insertEmbed(length, 'image', this.$store.getters.upload_url + file.name)
      quill.insertEmbed(length, 'image', this.$store.getters.upload_url + res.key)
      // 调整光标到最后
      quill.setSelection(length + 1)
    },
这样就完成了 vue + upload + quill 封装富文本编辑器组件的全过程，下面是我封装的组件的全部代码，token 是在 $store 中保存的。
<template>
  <div id='quillEditorQiniu'>
    <quill-editor
      :style="{width: width ? width:'100%'}"
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @change="onEditorChange($event)"
    >
    </quill-editor>
    <Upload
      class="avatar-uploader"
      :accept="'image/*'"
      :action="'https://upload.qiniup.com'"
      name='file'
      :data="updateParams"
      :show-upload-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    >
    </Upload>
  </div>
</template>
<script>
import {quillEditor} from 'vue-quill-editor'
import * as Quill from 'quill'
import {ImageDrop} from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
let fontSizeStyle = Quill.import('attributors/style/size')
fontSizeStyle.whitelist = ['12px', '14px', '16px', '20px', '24px', '36px']
Quill.register(fontSizeStyle, true)
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)
const toolbarOptions = [['bold', 'italic', 'underline', 'strike'],
  [{'color': []}, {'size': fontSizeStyle.whitelist}],
  [{list: 'ordered'}, {list: 'bullet'}],
  [{indent: '-1'}, {indent: '+1'}],
  ['link', 'image']
]
// 自定义编辑器的工作条
export default {
  name: 'quill-editor-qiniu',
  components: {
    quillEditor,
    ImageResize
  },
  props: ['initValue', 'width'],
  created () {
    // 获取初始化回显内容
    this.content = this.initValue
    // 获取上传 token
    this.$store.dispatch('uploadToken')
  },
  mounted () {
    // 工具栏中的图片图标被单击的时候调用这个方法
    let imgHandler = (state) => {if (state) {document.querySelector('.avatar-uploader input').click()}
    }
    // 当工具栏中的图片图标被单击的时候
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', imgHandler)
  },
  data () {
    return {
      content: '',
      editorOption: {
        placeholder: '请输入',
        theme: 'snow',
        modules: {
          toolbar: {container: toolbarOptions},
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          }
        }
      },
      updateParams: {}}
  },
  watch: {initValue: function (newVal, oldVal) {this.content = newVal}
  },
  methods: {onEditorChange (event) {console.log(event, 'change')
      this.$emit('getEditorInfo', event)
    },
    beforeUpload (request, file) {
      // 设置上传参数
      this.updateParams.token = this.$store.state.upload_token
      this.updateParams.key = request.name
    },
    // 上传图片成功
    uploadSuccess (res, file) {
      // file 返回的文件信息，也可以在这里调用七牛上传。console.log(res, file, this.$store.getters.upload_url + res.key, 'success')
      // 上传完成以后修改图片地址，回显到 quill 编辑器中
      let quill = this.$refs.myQuillEditor.quill
      let length = quill.getSelection() ? quill.getSelection().index : 0
      // 插入图片  res.info 为服务器返回的图片地址
      console.log(this.$store.getters.upload_url + file.name)
      // quill.insertEmbed(length, 'image', this.$store.getters.upload_url + file.name)
      quill.insertEmbed(length, 'image', this.$store.getters.upload_url + res.key)
      // 调整光标到最后
      quill.setSelection(length + 1)
    },
    // 上传图片失败
    uploadError (res, file) {console.log(res, file, 'error')
    }
  }
}
</script>
<style scoped>
</style>
退出移动版