Quill 富文本 quill.insertEmbed 设置video标签 宽 高 自动播放等 属性

已于 2023-12-28 09:27:32 修改
阅读量966 收藏 9
点赞数 13
文章标签： 前端 javascript 开发语言 video-codec vue.js
于 2023-12-28 09:15:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50236740/article/details/135260614
版权

1.第一步我们要先修改quill源码，新建js为quill-video.js 。代码如下

import Quill from "quill";

// 源码中是import直接倒入，这里要用Quill.import引入
const BlockEmbed = Quill.import('blots/block/embed')
const Link = Quill.import('formats/link')

const ATTRIBUTES = ['height', 'width']

class Video extends BlockEmbed {
    static create(value) {
        let node = super.create()
        //添加
        node.setAttribute('src', value.url)
        node.setAttribute('controls', value.controls)
        node.setAttribute('width', value.width)
        node.setAttribute('height', value.height)
        node.setAttribute('loop', value.loop)
        node.setAttribute('autoplay', value.autoplay)
        node.setAttribute('muted', value.muted)
        return node
    }

    static formats(domNode) {
        return ATTRIBUTES.reduce((formats, attribute) => {
            if (domNode.hasAttribute(attribute)) {
                formats[attribute] = domNode.getAttribute(attribute)
            }
            return formats
        }, {})
    }

    static sanitize(url) {
        return Link.sanitize(url)
    }

    static value(domNode) {
        // 设置值包含宽高，为了达到自定义效果
        //宽高为空的话，就是按100%算
        return {
            url: domNode.getAttribute('src'),
            controls: domNode.getAttribute('controls'),
            width: domNode.getAttribute('width'),
            height: domNode.getAttribute('height'),
            autoplay: domNode.getAttribute('autoplay'),
            loop: domNode.getAttribute('loop'),
            muted: domNode.getAttribute('muted'),

        }
    }


    format(name, value) {
        if (ATTRIBUTES.indexOf(name) > -1) {
            if (value) {
                this.domNode.setAttribute(name, value)
            } else {
                this.domNode.removeAttribute(name)
            }
        } else {
            super.format(name, value)
        }
    }

    html() {
        const { video } = this.value()
        return `<a href="${video}">${video}</a>`
    }
}
Video.blotName = 'video'
// Video.className = 'ql-video' // 可添加样式，看主要需要
Video.tagName = 'video' // 用video标签替换iframe

export default Video

2:第二步直接使用

<template>
  <div>
    <el-upload
      :action="uploadUrl"
      :before-upload="handleBeforeUpload"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      name="file"
      :show-file-list="false"
      :headers="headers"
      style="display: none"
      ref="uploadImg"
      accept=".png,.jpg,.gif"
      v-if="this.type == 'url'"
    >
    </el-upload>
    <el-upload
      :action="uploadUrl"
      :before-upload="handleBeforeUpload"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      name="file"
      :show-file-list="false"
      :headers="headers"
      style="display: none"
      ref="uploadVideo"
      accept=".mp4,.avi"
      v-if="this.type == 'url'"
    >
    </el-upload>
    <div class="editor" ref="editor" :style="styles"></div>
  </div>
</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 { getToken } from "@/utils/auth";
// 注册自定义Video 导入第一步新建的quill-video.js
import Video from "@/utils/quill-video";
Quill.register(Video, true);

export default {
  name: "Editor",
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
    },
    /* 高度 */
    height: {
      type: Number,
      default: null,
    },
    /* 最小高度 */
    minHeight: {
      type: Number,
      default: null,
    },
    /* 只读 */
    readOnly: {
      type: Boolean,
      default: false,
    },
    // 上传文件大小限制(MB)
    fileSize: {
      type: Number,
      default: 10,
    },
    /* 类型（base64格式、url格式） */
    type: {
      type: String,
      default: "url",
    },
  },
  data() {
    return {
      uploadType: "",
      uploadUrl: process.env.VUE_APP_BASE_API + "/upload/file", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      Quill: null,
      currentValue: "",
      options: {
        theme: "snow",
        bounds: document.body,
        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", "video"], // 链接、图片、视频
          ],
        },
        placeholder: "请输入内容",
        readOnly: this.readOnly,
      },
    };
  },
  computed: {
    styles() {
      let style = {};
      if (this.minHeight) {
        style.minHeight = `${this.minHeight}px`;
      }
      if (this.height) {
        style.height = `${this.height}px`;
      }
      return style;
    },
  },
  watch: {
    value: {
      handler(val) {
        if (val !== this.currentValue) {
          this.currentValue = val === null ? "" : val;
          if (this.Quill) {
            this.Quill.pasteHTML(this.currentValue);
          }
        }
      },
      immediate: true,
    },
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.Quill = null;
  },
  methods: {
    init() {
      const editor = this.$refs.editor;
      this.Quill = new Quill(editor, this.options);
      // 如果设置了上传地址则自定义图片上传事件
      if (this.type == "url") {
        let toolbar = this.Quill.getModule("toolbar");
        console.log(toolbar);
        toolbar.addHandler("image", (value) => {
          console.log("图片");
          this.uploadType = "image";
          if (value) {
            this.$refs.uploadImg.$children[0].$refs.input.click();
          } else {
            this.quill.format("image", false);
          }
        });
        toolbar.addHandler("video", (value) => {
          console.log("视频");
          this.uploadType = "video";
          if (value) {
            this.$refs.uploadVideo.$children[0].$refs.input.click();
          } else {
            this.quill.format("video", false);
          }
        });
      }
      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);
      });
    },
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    handleUploadSuccess(res, file) {
      console.log(res, file);
      // 获取富文本组件实例
      let quill = this.Quill;
      // 如果上传成功
      if (res.code == 200) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  res.url为服务器返回的图片地址
       
        if (this.uploadType == "image") {
          quill.insertEmbed(length, this.uploadType, res.data);
        }
        // 插入视频  res.url为服务器返回的图片地址 设置video标签属性
        if (this.uploadType == "video") {
          quill.insertEmbed(length, this.uploadType, {
            url: res.data,
            autoplay: "true",
            loop: "true",
            muted: "true",
            width: "100%",
            height: "auto",
            controls: "true",
          });
        }

        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
    },
    handleUploadError() {
      this.$message.error("图片插入失败");
    },
  },
};
</script>

<style>
.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>

外派叙利亚
关注
  • 13
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-quill-editor视频上传，图片上传到服务器模块，用video标签替换iframe
01-08
quill-video-image-module 介绍 quill视频上传，图片上传到服务器模块，用video标签替换iframe 安装教程 cnpm i vue-quill-editor cnpm i quill cnpm i quill-video-image-module 使用说明 import 'quill/dist/quill.core.css' // import styles import 'quill/dist/quill.snow.css' // for snow theme import 'quill/dist/quill.bubble.css' // fo
富文本编辑vue-quill-editor如何把图片插到光标位置
yytasty的博客
07-26 4259
1.获取到富文本装着数据的对象 let quill = that.$refs.myQuillEditorForContent.quill 2.获取光标所在的位置 let length = that.$refs.myQuillEditorForContent.quill.selection.savedRange.index 3.把图片插到光标的地方(第三个参数是图片的url) quill....
vue项目里修改Quill内置的video blot，用video标签替换iframe
weixin_43587992的博客
01-11 5270
vue项目里修改Quill内置的video blot，用video标签替换iframe 既然搜到这了，quill的基本安装使用就不多说了，quill内置的video模块是使用iframe标签，用视频网站上视频分享连接没问题的，因为项目上用服务器本地的MP4视频，本来iframe的src直接指.mp4文件也是可以的，其他浏览器都可以，但是还有个感人IE，iframe里直接指向.mp4时IE会变成下载...
quill-blot-formatter:用于Quill的模块，允许调整编辑器元素的大小，重新放置等
05-23
羽毛笔墨迹格式化程序 用于格式化文档模块。 在很大程度上受启发。 开箱即用支持调整图像和iframe视频的大小和重新 ，但是可以使用和轻松扩展。 演示版 安装 使用yarn ： yarn add quill-blot-formatter 使用npm ： npm install --save quill-blot-formatter 用法 作为模块 import Quill from 'quill' ; // from the index, which exports a lot of useful modules import BlotFormatter from 'quill-blot-formatter' ; // or, from each individual module import BlotFormatter from 'quill-blot-formatter/d
quill.min.js&quill.snow.css-最佳富文本编辑器
04-04
Quill—心目中的最佳富文本编辑器 界面实在不够清新,不符合我的审美,遂决定给网站后台换一个富文本编辑器,经过几天的寻找以及试用,终于找到了符合我这强迫症的最完美的编辑器,它就是——Quill。 ...
quill富文本使用
lq_wwwxuexikcn的博客
11-29 886
复制粘贴word 里面图片并且 1.0 与 2.0 其set 与获取富文本单词不一样。quill 表格功能 要 2.0。
quill/vue-quill-editor的基础使用，自定义工具栏介绍，重新写图片/视频上传方法，insertEmbed插入，设置光标位置，增/添加字体、字号
热门推荐
初心 - 杨瑞超个人博客
04-07 1万+
基础使用 <template> <div> <quill-editor ref="edit" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)" /> </
vue富文本编辑器中上传图片
weixin_42080056的博客
08-07 8204
啊！！！好久没更新了，最近粉丝和访问量见长，正好有童鞋的项目遇到点问题，故出此文， 今天超哥给小伙伴带来的是vue中富文本编辑器上传的问题。 曾经写过一个文档管理的项目，用到最多的就是富文本编辑器。 说说遇到的坑吧：最终的提交结果，后端不要文档流，后端要上传成功返回的路径，不知道正在阅读此文的小伙伴是如何处理的，瞅着挺简单，但写起来还真有点麻烦，在这里以vue-quill-editor为例给...
富文本编辑器Quill(二)上传图片与视频
weixin_30535913的博客
01-22 734
image与video在Quill formats中属于Embeds，要在富文本中插入图片或者视频需要使用insertEmbed api。 insertEmbed insertEmbed(index: Number, type: String, value: any, source: String = 'api'): Delta 插入图片需要位置，内容类型以及图片的ur...
vue结合element-ui和quill富文本编辑器实现上传视频和封面
12-03
vue结合element-ui和quill富文本编辑器实现上传视频和封面
vue富文本编辑器 vue-quill-editor.js quill版本1.3.6
07-01
vue富文本编辑器vue-quill-editor.js quill版本1.3.6 使用教程 ： vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案 https://blog.csdn.net/cplvfx/article/details/125557966
uniapp editor富文本 quill.min.js image-resize.min.js
08-18
quill.min.js image-resize.min.js
Vue-Quill-Editor富文本编辑器的使用教程
12-29
本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法，供大家参考，具体内容如下 先看效果图：       1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor需要依赖）  npm install quill --save 3、代码  <quill-editor v-model=content ref=myQuillEdito
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 410
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
C++ WebServer的细节理解
我的博客
04-22 597
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
最新发布
Record Little
04-23 610
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
webman 事务回滚失效问题记录
juan9872的博客
04-21 777
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 423
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
quill.insertEmbed什么意思
05-18
quill.insertEmbed是Quill富文本编辑器提供的一个方法，用于在当前光标位置插入一个嵌入式对象，通常用于插入图片、音频、视频等多媒体元素或者自定义的内嵌对象。该方法需要传入两个参数，第一个参数是要插入的对象在文档中的位置，可以是当前光标所在的位置（使用Quill.getSelection().index获取），也可以是文档中的任意位置；第二个参数是要插入的对象的属性，属性值可以是一个对象，也可以是一个字符串，具体取决于插入的对象类型和所需的属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值