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

Question

使用 vuejs 2，我可以在 div contenteditable 中插入一个组件（我的测试称为 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();
    }}};

"range.insertNode(instance.$el);" 中的 $el 有问题但我认为组件 testo2 永远不会被挂载。

有人知道怎么做吗？

Answer 1

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 是一个元素，您可以直接挂载到它，或者创建一个子元素并挂载到该子元素。