quill富文本编辑器自定义图片上传

github老哥的代码

   const editor = new Quill('#quill-editor', {bounds: '#quill-editor',modules: {toolbar: this.toolbarOptions},placeholder: 'Free Write...',theme: 'snow'});/*** Step1. select local image**/function selectLocalImage() {const input = document.createElement('input');input.setAttribute('type', 'file');input.click();// Listen upload local image and save to serverinput.onchange = () => {const file = input.files[0];// file type is only image.if (/^image\//.test(file.type)) {saveToServer(file);} else {console.warn('You could only upload images.');}};}/*** Step2. save to server** @param {File} file*/function saveToServer(file: File) {const fd = new FormData();fd.append('image', file);const xhr = new XMLHttpRequest();xhr.open('POST', 'http://localhost:3000/upload/image', true);xhr.onload = () => {if (xhr.status === 200) {// this is callback data: urlconst url = JSON.parse(xhr.responseText).data;insertToEditor(url);}};xhr.send(fd);}/*** Step3. insert image url to rich editor.** @param {string} url*/function insertToEditor(url: string) {// push image url to rich editor.const range = editor.getSelection();editor.insertEmbed(range.index, 'image', `http://localhost:9000${url}`);}// quill editor add image handlereditor.getModule('toolbar').addHandler('image', () => {selectLocalImage();});

改造成上传到firebase/storage

import firebase from "firebase/app";
import "firebase/storage";editor.getModule("toolbar").addHandler("image",(file, editor, cursorLocation, resetUploader) => {const input = document.createElement("input");input.setAttribute("type", "file");input.click();// Listen upload local image and save to serverinput.onchange = () => {const file = input.files[0];console.log(file.type);// file type is only image.if (/^image\//.test(file.type)) {const storageRef = firebase.storage().ref();const docRef = storageRef.child(`documents/blogPostPhotos/${file.name}`);docRef.put(file).on("state_changed",(snapshot) => {console.log(snapshot);},(err) => {console.log(err);},async () => {const downloadURL = await docRef.getDownloadURL();state.quill.insertEmbed(cursorLocation, "image", downloadURL);});} else {console.warn("You could only upload images.");}};});```

quill富文本编辑器自定义图片上传相关推荐

Ueditor富文本编辑器修改图片上传路径
Ueditor富文本编辑器修改图片上传路径版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/QZPHP_L 由于网站后台使用Zend framewor ...
vue3中使用vue-quill富文本编辑器重写图片上传功能
最近开发的一个vue3+element-plus的项目,需要用到富文本编辑器,最终选择了VueQuill这一款轻便型的富文本编辑器. 说说遇到的问题:富文本编辑器的图片上传,默认是直接以base64图 ...
vue-quill-editor富文本编辑器及图片上传到服务器
最近在做后台管理平台,该项目是使用vue+element-ui框架,有一个界面就是关于消息推送的,在网上找了一圈,比较适合的就是vue-quill-editor富文本编辑器 1.需求完成图: 此项目就 ...
关于移动手机端富文本编辑器qeditor图片上传改造
日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...
edui 富文本编辑_改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...
使用 SpringBoot + Ckeditor 富文本编辑器、图片上传
一.前言在一些页面中,进行发表文章.评论等功能,都要涉及到富文本编辑器, 如 CSDN 的 markdown 编辑器使用传统的 textarea 标签是远远满足不了需求的, 现在流行的富文本编辑 ...
springboot 整合文本编辑器（图片上传）
Ueditor 文件上传配置: ueditor.config.js serverUrl:填写自己的路径 jsp->config.json: imageActionName:填写自己写的文件上传的 ...
quill 富文本编辑器自定义格式化
quilljs 现在富文本编辑器轮子太多了,Github 上随便搜一下就有一堆,我需要实现的功能很简单,所以就佛系地选了 quilljs,quilljs 是一个轻量级的富文本编辑器. 链接: 官网:q ...
JavaWeb富文本编辑器与文件上传
目录一.富文本编辑器 1.下载富文本编辑器 2.富文本编辑器的应用二.文件上传文件上传必须要注意的规则: 文件上传案例文件夹的访问一.富文本编辑器富文本编辑器在项目中很常见,它可以将文本, ...

quill富文本编辑器自定义图片上传

quill富文本编辑器自定义图片上传相关推荐

最新文章

热门文章