vuejs 2到vuejs 3，如何在contenteditable中插入组件？

问题描述

使用vuejs 2，我可以在一个内容可编辑的div内插入一个组件（在我的测试中称为testo2），代码如下：

addtesto(){
  let ComponentClass = Vue.extend(testo2);
  let instance = new ComponentClass();
  instance.$mount();

  let sel,range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      range.insertNode(instance.$el);
      window.getSelection().removeAllRanges();
    }
  }
}

很久以来，我一直尝试将此代码转换为vuejs 3及其组合api（在setup（）内），但是此代码不起作用：

const addtesto = () => {
// here it changes
  const instance = createApp(testo2);
  instance.mount();

  // here it is same thing
  let sel,range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      range.insertNode(instance.$el);
      window.getSelection().removeAllRanges();
    }}};

$ el在“ range.insertNode（instance。$ el）;”中有问题但是我认为组件testo2从未安装过。

有人知道该怎么做吗？

解决方法

instance.mount();需要传递一个元素

不确定到底发生了什么，但是您可以尝试这样的事情

const addtesto = () => {
  const instance = createApp(testo2);
  let sel,range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      instance.mount(range); // mount to range
      window.getSelection().removeAllRanges();
    }
  }
};

我假设range是一个元素，您可以直接将其安装到该元素，也可以创建一个子代并将其安装到该子代。