vue3中使用vue-quill富文本编辑器， 遇到DOMNodeInserted过期问题

问题报错：

[Deprecation] Listener added for a 'DOMNodeInserted' mutation event. Support for this event type has been removed, and this event will no longer be fired. See <https://chromestatus.com/feature/5083947249172480> for more information.

问题原因： vue-quill是在quill基础上的对vue3做的封装，但是github上的vue-quill项目已经有一两年没有维护了，还是依赖的quill.js 1.3.7版本，所以里面一些问题后面都没有继续解决。但是quill项目一直在演进。 我们可以在package.json文件中强行指定依赖quill的2.0.x版本来解决。

  "pnpm": {
    "overrides": {
      "quill": "^2.0.2"
    }
  }

解决之后遇到的其他坑：

1. 升级之后，原来绑定的keyboard事件中的回车键写的是13，现在必须要写成'Enter'。

const options = {
  debug: false,
  modules: {
    toolbar: false,
    keyboard: {
      bindings: {
        enter: {
          key: 'Enter', // 13不管用了
          handler: handleEnter
        }
      }
    }
  },
  placeholder: 'Enter发送 / Shift+Enter换行',
  theme: 'snow'
}

2. 当用户使用拼音输入法开始输入汉字时，输入的拼音字母会和placeholder重叠。

解决办法：

editorRef.value?.getQuill().on('composition-start', () => {
    // 当用户使用拼音输入法开始输入汉字时，这个事件就会被触发
    getQuill().root.dataset.placeholder = ''
})
editorRef.value?.getQuill().on('composition-end', () => {
    // 当用户使用拼音输入法输入完成后，把值恢复成原来的值
    getQuill().root.dataset.placeholder = getQuill().options.placeholder
})
  
// 或者
quill = new Quill(....)
quill.on('composition-start', () => {
  // 当用户使用拼音输入法开始输入汉字时，这个事件就会被触发
  quill.root.dataset.placeholder = ''
})
quill.on('composition-end', () => {
  // 当用户使用拼音输入法输入完成后，把值恢复成原来的值
  quill.root.dataset.placeholder = quill.options.placeholder
})
  

参考：

1. github.com/vueup/vue-q…
2. www.cnblogs.com/icejd/p/182…