富文本编辑器Quill(二)上传图片与视频

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>

  

原文地址:https://www.cnblogs.com/linxiyue/p/10305047.html

时间: 2024-11-14 12:28:15

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

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

今天一直在整我的一个项目的编辑器上传图片,我用的是百度UEditor 1.3版本的:现在已经有了1.4的了,不过还算比较新吧,但是官网上面没有上传图片这些的教程,而网上对于这方面的资料很少啊,折腾了我半天,看了一些以前版本的上传图片的问题,最后终于搞定了. 先说说我的这个项目的配置情况吧 用的是SSH框架:struts2.3.16 spring3.2.5 hibernate3.3.2 ueditor 1.3-utf-8-jsp版 jdk 1.7 开发工具用的是myeclipse10.7 直接把项

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

在使用百度富文本编辑器的过程中,如果是有一台单独的图片服务器就需要将上传的图片内容放到图片服务器,也就是比如在a.com的编辑器上传图片,图片要保存到img.com的跨域上传图片功能,而在ueditor官方文档中说不支持单图上传的跨域, 网上查了一下各种花里胡哨,一顿操作猛如虎,比如加document.domain,配置全域名的等等都是然并卵,我仔细研究了一下ueditor的demo文件,相出了一个折中办法,很简单只需要修改demo中两个地方的代码外加写一个上传接口即可. 首先引入页面uedit

百度富文本编辑器UEditor自定义上传图片接口

如下图:  然后修改ueditor.all.js 

SpringBoot2 整合 JSP视图模板 整合 Ueditor富文本编辑器

一般涉及到后台管理系统,就少不了富文本编辑器,这个可以图文视频混排高级工具,笔者通过对比,发现目前市场上最好的三方库还当属百度的 ueditor 近年来 SpringBoot 框架可谓越来越火,可是笔者发现 ueditor 只提供了对于 JSP 的版本,网上能找到很多继承的案列,但是大部分都是修改源码,或者 自己去实现上传文件的接口这使得一些功能不能被使用或者需要花大量的事件去实现上传文件的方法,通过权衡,还是 springboot + jsp + ueditor 的方式最简单 虽然 jsp 不

富文本编辑器使用

原文地址:http://www.javayihao.top/detail/169 这里介绍两种常见的富文本使用方式 第一种NicEdit 官网描述: What is NicEdit? NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser. NicEdit Javascript integr

Simditor 富文本编辑器多选图片上传、视频连接插入

simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firefox.Safari. 点击这里下载zip文件.你也可以安装 Simditor bower 和 npm: $ npm install simditor $ bower install simditor 在 项目中使用 simditor 导入 simditor 样式文件和 js 文件 <link rel

富文本编辑器 - wangEditor 上传图片

效果: . 项目结构图: wangEditor-upload-img.html代码: <html> <head> <title>wangEditor-图片上传</title> <link rel="stylesheet" href="wangEditor/css/wangEditor-1.3.0.min.css"> <style type="text/css"> .wrap{

BBS(仿博客园系统)项目05(后台管理功能实现:文章添加、富文本编辑器使用、xss攻击、BeautifulSoup4模块、富文本编辑器上传图片、修改头像)

摘要 布局框架搭建 随笔添加 后台管理富文本编辑器KindEditor xss攻击 文章简介的截取,BeautifulSoup4模块 富文本编辑器上传图片 头像修改 一.后台管理框架布局搭建 后台管理布局框架分析:导航条.左侧功能区.右侧主要功能显示和实现区 实现: 导航条:使用bootstrap模板:JavaScript>>导航条 左侧:使用bootstrap模板:组件>>列表组 右侧:使用bootstrap模板:JavaScript>>标签页 新建后台管理路由(注意

Quill – 可以灵活自定义的开源的富文本编辑器

Quill 的建立是为了解决现有的所见即所得(WYSIWYG)的编辑器本身就是所见即所得(指不能再扩张)的问题.如果编辑器不正是你想要的方式,这是很难或不可能对其进行自定义以满足您的需求. Quill 旨在通过把自身组织成模块,并提供了强大的 API 来构建额外的模块来解决这个问题.它也并没有规定你用样式来定义编辑器皮肤.Quill 还提供了所有你希望富文本编辑器说用于的功能,包括轻量级封装,众多的格式化选项,以及广泛的跨平台支持. 您可能感兴趣的相关文章 创意无限!一组网页边栏过渡动画[附源码