image与video在Quill formats中属于Embeds,要在富文本中插入图片或者视频需要使用insertEmbed api。

insertEmbed

insertEmbed(index: Number, type: String, value: any, source: String = 'api'): Delta

插入图片需要位置,内容类型以及图片的url:

quill.insertEmbed(10, 'image', 'https://quilljs.com/images/cloud.png')

获取位置:

const range = quill.getSelection();

上传图片

首先toolbar中添加image,还需要一个隐藏input元素用来上传图片:

<template>
<div>
<div id="toolbar">
<span class="ql-formats">
<button class="ql-image"></button>
<button class="ql-video"></button>
</span>
</div>
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
<input id="uploadImg" type="file" style="display:none" accept="image/png, image/jpeg, image/gif" @change="uploadImage">
</div>
</template>

为image添加handler,点击时上传图片:

this.quill.getModule("toolbar").addHandler("image", this.uploadImageHandler)

handler:

    uploadImageHandler () {
const input = document.querySelector('#uploadImg')
input.value = ''
input.click()
},

为input元素添加onchange事件,获取上传图片,上传服务器,获取图片地址,将地址插入到编辑器中:

  async uploadImage (event) {
const form = new FormData()
form.append('upload_file', event.target.files[0])
const url = await $.ajax(...) #上传图片 获取地址
const addImageRange = this.quill.getSelection()
const newRange = 0 + (addImageRange !== null ? addImageRange.index : 0)
this.quill.insertEmbed(newRange, 'image', url)
this.quill.setSelection(1 + newRange)
}

  全部代码:

<template>
<div>
<div id="toolbar">
<span class="ql-formats">
<button class="ql-image"></button>
<button class="ql-video"></button>
</span>
</div>
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
<input id="uploadImg" type="file" style="display:none" accept="image/png, image/jpeg, image/gif" @change="uploadImage">
</div>
</template> <script>
import Quill from 'quill' export default {
name: "QuillEditor",
mounted () {
this.initQuill()
},
beforeDestroy () {
this.quill = null
delete this.quill
},
methods: {
initQuill () {
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: '#toolbar'
}
})
this.quill = quill
this.quill.getModule("toolbar").addHandler("image", this.uploadImageHandler)
},
uploadImageHandler () {
const input = document.querySelector('#uploadImg')
input.value = ''
input.click()
},
async uploadImage (event) {
const form = new FormData()
form.append('upload_file', event.target.files[0])
const url = await $.ajax(...)
const addImageRange = this.quill.getSelection()
const newRange = 0 + (addImageRange !== null ? addImageRange.index : 0)
this.quill.insertEmbed(newRange, 'image', url)
this.quill.setSelection(1 + newRange)
}
}
}
</script>

上传视频做些少许修改就可以了:

<input id="uploadVideo" type="file" style="display:none" accept="video/*" @change="uploadVideo">
this.quill.getModule("toolbar").addHandler("video", this.uploadVideoHandler)
uploadVideoHandler () {...}
async uploadVideo (event) {...}

定制Video

默认的video上传会存在一个问题,上传后video是放在iframe中的,一般情况下是没有问题的,但在小程序中使用h5页面时,iframe中的域名需要添加到小程序业务域名中,否则会禁止访问。

更好的解决方法是简单的添加一个video元素,而不是iframe,我们需要定制一个Video Embed。

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 = 'simpleVideo'
VideoBlot.tagName = 'video'
Quill.register(VideoBlot)

插入Embed:

      this.quill.insertEmbed(newRange, 'simpleVideo', {
url,
controls: 'controls',
width: '100%',
height: '100%'
})

添加效果:

<video src="...mp4" controls="controls" width="100%" height="100%" webkit-playsinline="true" playsinline="true" x5-playsinline="true"></video>

  

富文本编辑器Quill(二)上传图片与视频的更多相关文章

  1. 现代富文本编辑器Quill的内容渲染机制

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  2. 富文本编辑器Quill(一)简单介绍

    Quill是一个很流行的富文本编辑器,github上star大约21k: github:https://github.com/quilljs/quill/ 官网: https://quilljs.co ...

  3. iView + vue-quill-editor 实现一个富文本编辑器(包含图片,视频上传)

    1. 引入插件(注意IE10以下不支持) npm install vue-quill-editor --savenpm install quill --save (Vue-Quill-Editor需要 ...

  4. 现代富文本编辑器Quill的模块化机制

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  5. ueditor富文本编辑器跨域上传图片解决办法

    在使用百度富文本编辑器上传图片的过程中,如果是有一台单独的图片服务器就需要将上传的图片放到图片服务器,比如在a.com的编辑器中上传图片,图片要保存到img.com,这就涉及到跨域上传图片,而在ued ...

  6. 富文本编辑器...quill 的使用放...

    移动端 quill 时候用的 是 div 而不是 textarea.... 引入 dom <link href="//cdn.quilljs.com/1.3.6/quill.snow. ...

  7. 富文本编辑器Quill的使用

    我们经常需要使用富文本编辑器从后台管理系统上传文字,图片等用于前台页面的显示,Quill在后台传值的时候需要传两个参数,一个用于后台管理系统编辑器的显示,一个用前台页面的显示,具体代码如下截图: 另Q ...

  8. 百度富文本编辑器UEditor1.3上传图片附件等

    今天一直在整我的一个项目的编辑器上传图片,我用的是百度UEditor 1.3版本号的:如今已经有了1.4的了,只是还算比較新吧,可是官网上面没有上传图片这些的教程,而网上对于这方面的资料非常少啊,折腾 ...

  9. EXTJS中整合tinymce的富文本编辑器,添加上传图片功能

    提供部分代码.Ext.create('Ext.window.Window', { id: 'wind', title: 'CRUD窗口', modal: true, height: 800, widt ...

随机推荐

  1. find 详解

    find 详解 原文请访问http://itlab.idcquan.com/linux/SHELL/949102.html 当最初登录到系统中时, u m a s k命令确定了你创建文件的缺省模式.这 ...

  2. 神贴真开眼界:为什么很多人倡导重视能力和素质,但同时对学历有严格要求?——代表了上一场比赛的输赢,招聘成本很重要。如果上一场游戏失败了,尽量让自己成为当前群体的尖子。学历只是其中的一个作品而已,但学历代表了学生时代为之做出的牺牲。人群自有偏向集中性 good

    对于软件工程师职位,没学历没关系,如果真觉得自己才高八斗,请在简历里附上 github项目链接或者 appstore/google play上你的作品.如果学历比别人低,那么想必是把时间和精力用在了其 ...

  3. Python003-测试辅助示例应用数据库更新语句创建

    上周同事又问一个问题:表 C_Application 中数据量较大,需要批量更新 load_start_time 的时间为 '1900-01-01 18:43:49' 为初始值,以一定时间间隔且每次更 ...

  4. PPTPD 服务搭建

    查看系统发行版 uname -a 安装pptpd 服务 apt-get -y install ppp pptpd 配置 PPTPD 文件 vim /etc/pptpd.conf #去掉注释 local ...

  5. cnblogs

    想注册个博客园来着的,看着大佬们的博客都十分漂亮,但是发现我因为太菜没有办法搞定美化问题. 以后再说吧 写写东西,反正也没人看,但是写的时候尽量按给别人看的格式写吧 2019.3.15 开通博客 计划 ...

  6. 如何优雅的运行起jmeter

    安装jdk 下载网站:http://www.oracle.com/,选个最新的版本就可以. 注意:11以后没有自动生成jre 配置环境变量 对于Java程序开发而言,主要会使用JDK的两个命令:jav ...

  7. C# linq语句学习

    using System; using System.Linq; namespace ConsoleApp1 { class Program { static void Main(string[] a ...

  8. 运维面试题之k8s

    前言: 到了如今年k8s已经是事实上的容器集群标准了,是时候展现我真正的祖传k8s实力了 吐槽: 我干嘛要知道这些,能用不就行了k8s真香 Kubernetes有哪些特性? Kubernetes是自动 ...

  9. Hadoop多租户架构配置

    cloudera manager 进到cluster里面,点击Dynamic Resource Pools,没做任何配置默认情况下,资源池里有个default资源组 hadoop jar /usr/l ...

  10. JDK8 HashMap--removeNode()移除节点方法

    /*删除节点*/ final Node<K,V> removeNode(int hash, Object key, Object value, boolean matchValue, bo ...