quill光标位置插入html，quill编辑器+word文档上传，插入指定位置

官方quill没有直接给出插入html的方式

类似，下面两个方法，是quill框架提供的，但是并没有提供可以在指定光标位置插入html

quill.pasteHTML：这个方法已经废弃了，但目前还是可以使用；

dangerouslyPasteHTML：这个方法也可插入html代码；

如何在quill光标位置插入html

quill.clipboard.convert(bodyHTML) //把html转换成delta格式
let range = quill.getSelection(true); //获取光标位置
const delta = new Delta().retain(range.index).delete(range.length).concat(value);
quill.updateContents(delta, Quill.sources.USER); //更新内容

quill = new Quill(element);
let value = quill.clipboard.convert(bodyHTML) //把html转换成delta格式
let range = quill.getSelection(true);
const delta = new Delta().retain(range.index).delete(range.length).concat(value);
quill.updateContents(delta, Quill.sources.USER);

quill编辑器+word文档上传，插入指定位置

需要Mammoth库支持，把word文档转换成html代码

关键代码在这里拉！！！！！需要自己琢磨一下

调用chooseWord()方法

 let quill = new Quill(data.element);chooseWord() {   choosePicture({multiple: false,elementId: 'word-input',accept: '.docx, .doc,',onChange: function (files) {const file = files[0]const reader = new FileReader();//FileReader对象reader.onload = function (loadEvent) {//读取成功完成时调用const arrayBuffer = loadEvent.target['result']// 默认情况下，图像被转换为元素，源文件包含在src属性中。可以通过将convertImage选项设置为图像转换器来更改此行为。const options = {convertImage: Mammoth.images.imgElement(image => {return image.read('base64').then(async imageBuffer => {                           let r = base64ToBlob(imageBuffer, image.contentType)let url = URL.createObjectURL(r) //转换成blob类型的图片地址，最后提交数据会把所有blob类型的图片统一this.editor.uploadImgList();上传服务器return {src: url,}})})}//把源文档转换为 HTML 文档Mammoth.convertToHtml({ arrayBuffer: arrayBuffer }, options).then(r => {let value = quill.clipboard.convert(r.value) //把html转换成delta格式let range = quill.getSelection(true);const delta = new Delta().retain(range.index).delete(range.length).concat(value);quill.updateContents(delta, Quill.sources.USER);})}reader.readAsArrayBuffer(file)}});}//调取文件方法
/*** * @param {string} options.elementId 创建input节点id * @param {string} options.accept 创建input文件类型*/
function choosePicture(options) {let fileInput = document.getElementById(options.elementId||'image-input');if (!fileInput) {fileInput = document.createElement('input');fileInput.setAttribute('id', options.elementId||'image-input');}fileInput.setAttribute('type', 'file');fileInput.setAttribute('accept', options.accept||'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');fileInput.setAttribute('style', 'display: none;');document.body.appendChild(fileInput);if (options.multiple === true) {fileInput.setAttribute('multiple', 'multiple');} else {fileInput.removeAttribute('multiple')}fileInput.setAttribute('value', '');fileInput.onchange = function () {options.onChange(fileInput.files);fileInput.value = '';fileInput.remove();};fileInput.click();
}// base64图片转为blob
const base64ToBlob=(base64, mimeType)=> {let bytes = window.atob(base64)let ab = new ArrayBuffer(bytes.length)let ia = new Uint8Array(ab);for (let i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i)}let blob = new Blob([ia], { type: mimeType })blob.name = `blob.${mimeType.split('/')[1]}`return blob
}

quill光标位置插入html，quill编辑器+word文档上传，插入指定位置相关推荐

插入顶部_最快速地把同一内容插入到Word文档不同页面的相同位置
您好,欢迎来到[爆炒Office],这里有原创的实用办公软件技巧. 概述之前也讨论过把同一内容插入到Word文档不同页面的相同位置,类似于logo,但又可以每一页都自由编辑.现在找到一个更好的方法, ...
word 段显示在页面最下方_最快速地把同一内容插入到Word文档不同页面的相同位置...
您好,欢迎来到[爆炒Office],这里有原创的实用办公软件技巧. 概述之前也讨论过把同一内容插入到Word文档不同页面的相同位置,类似于logo,但又可以每一页都自由编辑.现在找到一个更好的方法, ...
计算机word如何插入新列表,电脑word文档中怎么给表格自动添加序号？怎么增加表目录...
电脑word文档中怎么给表格自动添加序号?怎么增加表目录腾讯视频/爱奇艺/优酷/外卖充值4折起我们看一篇word文件的时候,如果篇幅比较长而表格又比较多的话,一般会给这篇word设置一个表目录. ...
html中怎么插入文档,word如何输入引用 word文档中怎么插入参考文献
Word添加论文引用标注2008-05-0600:08 word2013怎么插入和引用参考文献怎么在word里做引用标注光标移到要加入参考文献标注的地方菜单中"引用"选项卡, ...
用freemarker生成word文档，并插入图片
用freemarker生成word文档,并插入图片最近需要做一个问卷功能,要求用户填写完问卷后,后台会生成一个word文档,将用户提交的数据插入到word中. 创建word模板新建一个word文档 ...
【ChatGPT】Spire.Doc 插入电子图章到 Word 文档
要在Word文档中插入电子图章,可以使用Spire.Doc提供的DocPicture类.以下是一个示例,演示如何使用Spire.Doc插入电子图章到Word文档: using Spire.Doc; u ...
Word文档表格中插入图片无法完整显示解决办法
如上图所示,Word文档表格中插入图片却只显示很窄一条边解决办法:选中图片,菜单栏上点击段落右方小箭头扩展项选择单倍行距,即可完整显示图片
Word文档中如何插入分数
在用Word制作数学资料时,通常需要插入分数,那Word怎么敲出上下结构的分数呢?看看小编是怎么操作的吧首先,用speedoffice软件打开Word文档,在"插入"选项中找到& ...
在word文档表中插入图片不变形
在word文档表中插入图片不变形目录在word文档表中插入图片不变形 1.点击左上角[全选图标 ]选中表格,鼠标右键点击[表格属性] 2.点击[选项]点击取消勾选[自动重调尺寸以适应内容],最后 ...

quill光标位置插入html，quill编辑器+word文档上传，插入指定位置

quill光标位置插入html，quill编辑器+word文档上传，插入指定位置相关推荐

最新文章

热门文章