quill富文本编辑器----图片、视频处理 - 曾小纳的个人空间

相关文章推荐
冷静的油条 · pytest自动发送测试报告邮件 ...· 1 月前 ·
眼睛小的野马 · Common application ...· 4 周前 ·
唠叨的碗 · 【云原生 kubernetes 】- ...· 4 周前 ·
温柔的毛衣 · #include_next ...· 6 月前 ·
健壮的猴子 · 彻底理解使用JavaScript ...· 1 年前 ·
小胡子的松鼠 · Qt基本框架介绍 - ...· 1 年前 ·
鼻子大的炒粉 · jupyter使用tensorflow-掘金· 1 年前 ·
前端在开发时，可能会使用到富文本编辑器，作为vue项目中，quill是一款不错的富文本编辑器，但是，它有一个问题，即如果在富文本中添加图片或视频时，会将本地的媒体文件转为base64，如果我们不处理这些问题时，会使得到的输入内容过长，一方面网络加载很慢，另一方面可能会导致后台在创建数据库进，内容溢出，所以，无论对前端还是后台而言，都需要将被保存的文件单独上传，将img标签中src的值替换为上传后的地址。
下面我们将从头开始，实现这个功能，当然，前提我们需要有一个vue前端项目，可以直接使用 vue-cli 来创建，也可以直接下载一些搭建好的空白项目，此处略去方法或步骤。
1. 首先：我们在项目中引入 quill 。
npm install -S quill
2. 在使用的地方引入quill 根据实际情况引入quill组件及其样式，可以全局引入，也可以在单个页面中引入。 
// 1. 全局引入，在main.js中引入
import Quill from "quill"
Vue.use(Quill)
import "quill/dist/quill.core.css"
import "quill/dist/quill.snow.css"
import "quill/dist/quill.bubble.css";
// 2. 局部引入，一般会把它封装为一个组件，方便多次使用
// 在components/QuillEditor/index.vue中引入quill
import Quill from "quill";
import "quill/dist/quill.core.css"
import "quill/dist/quill.snow.css"
import "quill/dist/quill.bubble.css";
3. 初始化编辑器，配置编辑器 
 在template创建一个富文本的载体div，再创建一个隐藏的input，用于图片上传，设置好accept 
 <div id="editor" class="eidtor" ref="editor"> </div>
 <input type="file" @change="picChange" style="display: none;" id="picInput">
 初始化富文本编辑器 
import Quill from "quill"
import "quill/dist/quill.core.css"
import "quill/dist/quill.snow.css"
import "quill/dist/quill.bubble.css";
export default {
 data() {
  return {
   quill: null
 mounted() {
  // 注意，不要在created中初始化，可能会导致找不到div
   this.initEDditor();
 methods: {
  // 配置方法，可以直接写在data中
  getOptions() {
    return {
    theme: "snow",
    debug: "warn",
    modules: [
      toolbar: [
          ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
          ["blockquote", "code-block"],                    // 引用  代码块
          [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
          [{ indent: "-1" }, { indent: "+1" }],            // 缩进
          [{ size: ["small", false, "large", "huge"] }],   // 字体大小
          [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
          [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
          [{ align: [] }],                                 // 对齐方式
          ["clean"],                                       // 清除文本格式
          ["link", "image"]                       // 链接、图片、视频
  initEditor() {
      let options = this.getOptions();
      this.quill = new Quill("#editor", options);
 添加图片上传，并将上传后得一的url放回到编辑器中对应的img标签中，当然，在此之前需要下载发送请求的工具，如我们常用的axios。 
npm install -S axios
此时的原理是：当我们监听到点击上传图片时，将我们隐藏的input被点击，此时，会调起选择文件的框，当我们选中了文件后，直接使用input的change事件，使用我们写好的上传图片的方法，当图片上传成功后，我们调用quill为我们提供的insertEmbed方法，将图片上的路径存放到这个富文本中，当我们了了解了这个原理后，可以实现视频上传了（关于视频上传的代码就不贴出来了）。具体代码如下： 
  mounted() {
    this.initEDditor();
    this.quill.getModule("toolbar").addHandler("image", this.uploadImg)
  methods: {
    uploadImg(e) {
      document.getElementId("picInput").click();
    //  选择完图片后
    picChange(e) {
      let file = e.target.files[0];
      let fm = new FormData();
      fm.append("file", file);
      this.postImg(fm).then(res =>{
        // 下面的方法是我从网上查找的资料，也可能是官方提供 的方法，不过可以实现
        let addImageRange = this.quill.getSelection();
        let newRange = 0 + (addImageRange !== null ? addImageRange.index : 0);
        //  res.url为上传成功后由后台返回的图片访问路径
       this.quill.insertEmbed(newRange, "image", res.url);
       this.quill.setSelection(1 + newRange);
    //  图片上传接口
    postImg(fm) {
      let token = getToken();  // 获取token,根据实际来实现
      let headers = {
        "Content-Type": "multipart/form-data",
        Authorization: "Bearer " + token
      return new Promise(resolve =>{
        axios({
          url: "xxx",
          method: "post",
          data: fm,
          headers: headers
      }).then(res =>{
        if (res.data.code == 200) {
           resolve(res.data);
        } else {
          this.$message.error(res.data.msg)
      }).catch(err =>{
        this.$message.error(err.msg || "服务器错误，请稍候再试");
 既然做为一个组件，得需要回显数据、向父组件传值等操作，所以，我们还需要添加上quill为我们提供好的回调方法和向编辑器传值的方法 
      initEditor() {
        let options = this.getEditorOptions();
        this.quill = new Quill("#editor", options);
        this.quill.pasteHTML(this.currentValue);
        this.quill.on("text-change", (delta, oldDelta, source) => {
            const html = this.$refs.editor.children[0].innerHTML;
            const text = this.quill.getText();
            const quill = this.quill;
            this.currentValue = html;
            this.$emit("input", html);
            this.$emit("on-change", { html, text, quill });
        this.quill.on("text-change", (delta, oldDelta, source) => {
            this.$emit("on-text-change", delta, oldDelta, source);
        this.quill.on("selection-change", (range, oldRange, source) => {
            this.$emit("on-selection-change", range, oldRange, source);
        this.quill.on("editor-change", (eventName, ...args) => {
            this.$emit("on-editor-change", eventName, ...args);
//   添加watch监听，防止因渲染的生命周期方法导致页面无法回显数据
	 watch: {
    value: {
      handler(val) {
        if (val !== this.currentValue) {
          this.currentValue = val === null ? "" : val;
          if (this.quill) {
            this.quill.pasteHTML(this.currentValue);
如些，我们的editor也算是封装完成 了，当然 还需要加上上结class样式，下面是完整的代码 
<template>
      <div id="editor" class="eidtor" ref="editor"></div>
      <input type="file" id="picInput" style="display: none;" @change="picChange">
</template>
<script>
import Quill from "quill"
import "quill/dist/quill.core.css"
import "quill/dist/quill.snow.css"
import "quill/dist/quill.bubble.css";
import axios from 'axios';
export default {
  data() {
    return {
      quill: null,
      currentValue: ""
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
  mounted() {
      this.initEditor();
      this.quill.getModule("toolbar").addHandler("image", this.uploadImage);
  watch: {
    value: {
      handler(val) {
        if (val !== this.currentValue) {
          this.currentValue = val === null ? "" : val;
          if (this.Quill) {
            this.Quill.pasteHTML(this.currentValue);
  methods: {
    //   quill的配置内容
    getEditorOptions() {
        let options = {
            debug: "warn",
            modules: {  // 配置工具栏
                toolbar: [
                    ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
                    ["blockquote", "code-block"],                    // 引用  代码块
                    [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
                    [{ indent: "-1" }, { indent: "+1" }],            // 缩进
                    [{ size: ["small", false, "large", "huge"] }],   // 字体大小
                    [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
                    [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
                    [{ align: [] }],                                 // 对齐方式
                    ["clean"],                                       // 清除文本格式
                    ["link", "image"]                       // 链接、图片、视频
            placeholder: "请输入文本内容",
            readOnly: false,
            theme: "snow"  //  官方给定的theme有两种，一种为snow：标准工具栏主题；bublle：浮动提示主题
        return options;
    // 初始化quill对象
    initEditor() {
        let options = this.getEditorOptions();
        this.quill = new Quill("#editor", options);
        this.quill.pasteHTML(this.currentValue);
		// 下面的方法按需调用
        this.quill.on("text-change", (delta, oldDelta, source) => {
            const html = this.$refs.editor.children[0].innerHTML;
            const text = this.quill.getText();
            const quill = this.quill;
            this.currentValue = html;
            this.$emit("input", html);
            this.$emit("on-change", { html, text, quill });
        this.quill.on("text-change", (delta, oldDelta, source) => {
            this.$emit("on-text-change", delta, oldDelta, source);
        this.quill.on("selection-change", (range, oldRange, source) => {
            this.$emit("on-selection-change", range, oldRange, source);
        this.quill.on("editor-change", (eventName, ...args) => {
            this.$emit("on-editor-change", eventName, ...args);
    // 点击编辑器中的图片时触发的回调方法
    uploadImage() {
        document.getElementById("picInput").click();
    // 文件输入框失去焦点时，触发的方法
    picChange(e) {
        let file = e.target.files[0];
        let fm = new FormData();
        fm.append("file", file);
        this.postImg(fm).then(res =>{
            // 将返回的可以直接访问的图片路径放回到编辑器中
            let url = res.url;
            const addImageRange = this.quill.getSelection();
            const newRange = 0 + (addImageRange !== null ? addImageRange.index : 0);
            this.quill.insertEmbed(newRange,'image' ,url);
            this.quill.setSection(1 + newRange);
    // 向后台提交图片
    postImg(fm) {
        return new Promise((resolve, reject) =>{
            let self = this;
            let headers = {
                "Content-Type": "multipart/form-data"
            // 如果需要token时，需要此时添加token
            if (token) {
                headers.Authorzation = "Bearer " + token
            axios({
                url: "",
                method: "POST",
                headers: headers,
                data: fm,
            .then(res =>{
                if (res.data.code === 200) {
                    // 根据实际返回的值进行处理
                    resolve(res.data);
                } else {
                    self.$message.error(res.data.msg);
            .catch(err =>{
                self.$message.error(res.data.msg);
</script>
<style>
.eidtor {
    min-height: 150px;
    max-height: 500px;
    overflow: auto;
.editor, .ql-toolbar {
  white-space: pre-wrap!important;
  line-height: normal !important;
.quill-img {
  display: none;
.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: "等宽字体";
</style>
调用的方法： 
	<QuillEditor v-model="longText" />
                                                    MRF5S19100HR3, MRF5S19100HSR3 1930-1990 MHz, 22 W Avg., 28 V, 2 x N-CDMA Lateral N-Channel RF Pow...
                                                    政企云平台“一云多芯”路线全景图
                                                    嘉楠科技K230发布！支持Linux + RT-Thread Smart 双操作系统运行
                                                    AC Induction Motor Volts per Hertz Control with Speed Closed Loop, Driven by eTPU on MPC5500
                                                    MRF19030LR3, MRF19030LSR3 1930-1990 MHz, 30 W, 26 V Lateral N-Channel RF Power MOSFETs - Archived
                                                    实践指南-前端性能提升 270% | 京东云技术团队
                                                    ARCHIVED - AFT23H200-4S2LR6 2300-2400 MHz, 45 W Avg., 28 V Airfast^® RF Power LDMOS Tra...
                                                    KRBTQDLP61-3A_MicroSIDELED_viewA_Productpicture
                                                    MW6IC1940NBR1 1920-2000 MHz, 40 W, 28 V, 2 x W-CDMA RF LDMOS Wideband Integrated Power Amplifiers
                                                    High integrated and low power smart card interface
                                                    AN4771, Integrating FreeMASTER-Time Debugging Tool with CodeWarrior^® for Microcon...
                                                    UltraSPARC Virtual Machine Specification
                                                    打造音视频极致消费体验
                                                    别再让你的工程师用 Navicat 连数据库了
                                                    Best Virtualization Performance with KVM and Containers on Arm^®-based QorIQ SoCs
                                                    企业级服务网格优化中心：优化 Service Mesh 以提高性能和高可用性
                                                    ARCHIVED - MRF8P18265HR6, MRF8P18265HSR6 1805-1880 MHz, 72 W Avg., 30 V Single W-CDMA Lateral N-C...
                                                    镕铭微电子VPU 极致降本增效实践
                                                    HV start-up flyback controller for DCM or QR mode;  125 kHz f_osc(h); standby output signal
                                                    架构师日记-到底该如何搭建一个新系统 | 京东云技术团队 
                                                    蓝牙智能设备数据采集平台化方案 | 京东云技术团队
                                                    ROS双电信双线制作笔记
                                                    如何通过网关降低大模型的调用费用，并提升合规性
                                                    大会第二日，精彩不停！LiveVideoStackCon 2023 上海站
                                                    CGLIB动态代理对象GC问题排查 | 京东云技术团队
                                                    基于阿里云 Serverless 容器服务轻松部署企业级 AI 应用
                                                    MRF9030MR1, MRF9030MBR1 945 MHz, 30 W, 26 V Lateral N-Channel Broadband RF Power MOSFETs - Archived
                                                    搜狗输入法双击输入框崩溃问题 | 京东云技术团队
                                                    RocketMQ 在业务消息场景的优势详解
                                                    要能力、要稳定也要降本——百度多媒体技术回顾
                                                    Sugar BI：大模型时代的智能 BI
                                                    3-Phase Sensorless BLDC Motor Control with Back-EMF Zero Crossing Detection Using 56F805 Designer...
                                                    东方通信基于 KubeSphere 的云计算落地经验
                                                    Utilizing Extra FC Credits for PCI Express Inbound Posted Memory Write Transactions in PowerQUICC...
                                                    ARCHIVED - MHT2000NR1, MHT2000GNR1 2450 MHz, 25 W CW, 28 V Industrial Heating, Rugged RF LDMOS In...
                                                    轻量灵动： 革新轻量级服务开发 | 京东云技术团队
                                                    DolphinDB +机器学习，预测地震波形数据
                                                    Ui2Code+ChatGPT助力低代码搭建 | 京东云技术团队
                                                    “息壤”引领首个算力互联互通验证平台建设，天翼云开启算力互联网新纪元！
                                                    NineData支持最受欢迎数据库PostgreSQL
                                                    三连冠！天翼云蝉联中国专属云服务市场第一
                                                    【专题速递】在线K歌、云化XR、咔嚓剪辑和FFmpeg直播能力更新计划
                                                    图技术在 LLM 下的应用：知识图谱驱动的大语言模型 Llama Index
                                                    ARCHIVED - MRF8P9040NR1, MRF8P9040GNR1, MRF8P9040NBR1 728-960 MHz, 4.0 W Avg., 28 V CDMA, W-CDMA,...
                                                    入门平台工程的福音，麦肯锡刚发布了平台工程蓝图
                                                    Open LLM 排行榜近况
                                                    天翼云加入云原生安全实验室，推进行业标准制定和生态建设！
                                                    实践教程之使用 PolarDB-X 进行 TP 负载测试
                                                    MHVIC2114NR2 2100 MHz, 27 V, 23 dBm, Single W-CDMA RF LDMOS Wideband Integrated Power Amplifier
                                                    最后的组合：K8s 1.24 基于 Hekiti 实现 GlusterFS 动态存储管理实践
                                                    ARCHIVED - MRF8S9220HR3, MRF8S9220HSR3 920-960 MHz, 65 W Avg., 28 V Single W-CDMA Lateral N-Chann...
                                                    领域建模之数据模型设计方法论 | 京东云技术团队
                                                    阿里云容器服务 ACK 产品技术动态（202306）
                                                    AIGC狂飙下，一套优雅的媒体服务“顶层设计”
                                                    MRF6S21100NR1, MRF6S21100NBR1 2110-2170 MHz, 23 W Avg., 28 V, 2 x W-CDMA Lateral N-Channel RF Pow...
                                                    世界万象，总需要一个「端口」走进去
                                                    解读科学计算助力行业高质量发展｜2023 开放原子全球开源峰会科学智能分论坛即将启幕
                                                    MW5IC970NBR1 800-900 MHz, 70 W, 28 V RF LDMOS Wideband 2-Stage Power Amplifiers
                                                    什么是算力网络
                                                    MHT1000HR5 2450 MHz, 140 W CW, 28 V Industrial Heating, Rugged RF Power LDMOS Transistor - Data S...
                                                    下一代边缘计算技术在哪里？
                                                    社区供稿 | RLHF 实践中的框架使用与一些坑 (TRL, LMFlow)