Quill自定义插入视频video实例
import Quill from 'quill'
const BlockEmbed = Quill.import('blots/block/embed')
class VideoBlot 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('webkit-playsinline', true)
node.setAttribute('playsinline', true)
node.setAttribute('x5-playsinline', true)
return node;
}
static value(node) {
return {
url: node.getAttribute('src'),
controls: node.getAttribute('controls'),
width: node.getAttribute('width'),
height: node.getAttribute('height')
};
}
}
VideoBlot.blotName = 'simple_video'
VideoBlot.tagName = 'video'
Quill.register(VideoBlot)
// 使用
this.quill.insertEmbed(range.index, 'simple_video', {
url,
controls: 'controls',
width: '100%',
height: '100%'
})
Quill自定义插入视频video实例的更多相关文章
- 借用HTML5 插入视频。音频
HTML5 规定了一种通过 video 元素来包含视频的标准方法. 插入视频 <video width="320" height="240" contro ...
- kindeditor自定义插件插入视频代码
kindeditor自定义插件插入视频代码 1.添加插件js 目录:/kindeditor/plugins/diy_video/diy_video.js KindEditor.plugin('diy_ ...
- C#/VB.NET 向PowerPoint文档插入视频
如今,Microsoft Office PowerPoint在我们日常生活中的应用已经很广泛了,利用Microsoft Office PowerPoint不仅可以创建演示文稿,还可以在互联网上召开面对 ...
- 【转】向HTML中插入视频并兼容所有浏览器的方法
原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...
- 如何在html中插入视频
如何在html中插入视频 1,插入优酷视频: 在优酷分享界面有个html代码,直接复制放入body中,定义div的align居中即可 2.插入本地视频:用video属性 用mp4格式 <vid ...
- HTML中插入视频
最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. ...
- Markdown中如何插入视频 > iframe?
关于Markdown中如何插入视频这一问题 网上众说纷纭,一直也没找到一个确切的答案,想来也是,这些东西毕竟还不算成熟.各种以前提供过的方法现在来讲,可能在更新或是关闭大潮中又没了 而且,Ma ...
- H5插入视频兼容主浏览器
插入视频的方法有很多种,但是有一些方法不兼容. 方法1:DW插入视频利用DW插入的视频为flv格式,操作较简单,但是代码复杂,需要浏览器支持flash插件:火狐浏览器需要手动下载flash插件,比较麻 ...
- 页面中插入视频兼容ie8以上的浏览器
有时候页面中需要插入视频,如果不考虑ie8的话:就是直接用h5标签<video></video>就可以了: 但是有的时候需求是需要考虑ie8,这样我们就可以用插件,这种vide ...
- JVM系列六(自定义插入式注解器).
一.概述 从前面 文章 中我们可以了解到,javac 的三个步骤中,程序员唯一能干预的就是注解处理器部分,注解处理器类似于编译器的插件,在这些插件里面,可以读取.修改.添加抽象语法树中的任意元素.因此 ...
随机推荐
- 凸n边形的对角线最多能将其内部分成几个区域
https://math.stackexchange.com/questions/3384251/into-how-many-regions-do-the-sides-and-diagonals-of ...
- 阻止(禁止)textare回车换行
<van-field v-model="form.messageCont" rows="3" label="口号" autosize ...
- 重试机制与 CompletableFuture 拓展
重试机制与 CompletableFuture 拓展 禁止转载. 本文旨在讨论重试机制的特点和策略,分析常用重试类库的实现,讨论为 CompletableFuture 添加重试机制的方法.文章首发同名 ...
- PC端自动化测试实战教程-1-pywinauto 环境搭建(详细教程)
1.简介 之前总有人在群里或者私信留言问:Windows系统安装的软件如何自动化测试呢?因为没有接触过或者遇到过,所以说实话宏哥当时也不清楚怎么实现,怎么测试.然而在一次偶然的机会接触到了Python ...
- Luogu P3899 湖南集训 更为厉害 题解 [ 紫 ] [ 可持久化线段树 ] [ dfs 序 ] [ 线段树合并 ]
更为厉害:可持久化做法有点意思,但线段树合并做法就很无脑了. 线段树合并做法 显然有三种 \(b\) 的位置的分类讨论. 当 \(b\) 为 \(a\) 的祖先时 从祖先里选 \(b\),从儿子里选 ...
- FreeSql学习笔记——11.LinqToSql
前言 Linq的强大大家有目共睹,可以以简便的方式对数据集进行复杂操作,LinqToSql经常使用在数据库的联表.分组等查询操作中:FreeSql对LinqToSql的支持通过扩展包FreeSql ...
- 运用myabits
要使用 MyBatis, 只需将 mybatis-x.x.x.jar 文件置于类路径(classpath)中即可. 如果使用 Maven 来构建项目,则需将下面的依赖代码置于 pom.xml 文件中: ...
- QT5笔记: 31. 文件目录操作
开发的时候,QtCreator F1 查看相关类的信息
- MD5 - windows也可以查询某个文件的MD5码
命令格式 certutil -hashfile 文件名称 md5 示例 Microsoft Windows [版本 10.0.22621.1702] (c) Microsoft Corporation ...
- TIDB 数据库架构概述
学习目标 题解数据库整体架构 了解 TiDB Server .TiKV.TiFlash.和 PD 的主要功能 文章末尾获取笔记.视频资料,持续更新 体系架构 水平扩容或者缩容 金融级高可用 实时 HT ...