官方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图片转为blobconst 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}
