vue-quill-editor 图片实现自定义服务器上传的简单方法

mt23

于 2021-05-19 10:02:11 发布

阅读量304

点赞数 1

分类专栏： # 前端开发文章标签：富文本 quill vue

本文链接：https://blog.youkuaiyun.com/mathcoder23/article/details/117016304

版权

本文介绍了如何在vue-quill-editor中简单实现富文本图片上传到自定义服务器。通过封装图片操作工具类，提取base64，转换为file类型，调用接口并替换base64为url，避免了复杂的方法重写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-quill-editor介绍

这款组件是基于quill的富文本编辑器改造为vue环境使用的。
github地址-vue-quill-editor的基于MIT开源协议，可以放心使用

安装vue-quill-editor

npm install vue-quill-editor --save

注册组件到vue环境

路径：main.js


import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

Vue.use(VueQuillEditor)

简单示例

<template>
  <!-- Two-way Data-Binding -->
  <quill-editor
    ref="myQuillEditor"
    v-model="content"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready

最低0.47元/天解锁文章