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
}