vue-quill-editor 富文本添加上传音频功能（编辑回显audio元素不展示修复）

前言：
公司一直使用vue-quill-editor。新的需求要求上传audio。

参考https://blog.csdn.net/halo1416/article/details/103955910
来实现上传发现一个问题。看到有同学在评论区提了。博主没有复现。。然后自己尝试解决了下。

step1
将原来handleSuccess方法里的注册逻辑单独拿出来

// customize/audio-blot.js
import { Quill } from 'vue-quill-editor';
const BlockEmbed = Quill.import('blots/block/embed');
class AudioBlot extends BlockEmbed {
  static create(value) {
    const node = super.create(value);
    node.setAttribute('src', value.url);
    node.setAttribute('controls', true);
    node.setAttribute('name', value.name);
    node.setAttribute('controlsList', 'nodownload');
    return node;
  }
  // 添加value获取当前的audio元素。拿到audio元素的属性。
  static value(domNode) {
    const value = {
      url: '',
      name: '',
    };
    // 这里要加判断。不然会显示undefined
    if (domNode.getAttribute('src')) {
      value.url = domNode.getAttribute('src');
      value.name = domNode.getAttribute('name');
    }
    return value;
  }
}
AudioBlot.blotName = 'audio';
AudioBlot.tagName = 'audio';
export default AudioBlot;

step2

import AudioBlot from './customize/audio-blot';
//注册audio
Quill.register(AudioBlot);

简单两步解决回显问题。

ps:

当audio处于富文本第一个位置时候会出现删除不掉的情况。
让audio处于第二个。在audio后面再添加一个元素可以解决。
没遇到的同学请忽略

const length = quill.getSelection().index;
quill.insertEmbed(
  length + 1,
  'audio',
  { url: file.url, name: file.name },
  'api',
);
quill.insertText(length + 2, '');
quill.setSelection(length + 2);