如何在 vue js 的内容可编辑 div 中添加组件答案

【问题标题】：How can I add a component in a content-editable div in vue js如何在 vue js 的内容可编辑 div 中添加组件
【发布时间】：2020-12-01 19:42:45
【问题描述】：

我想通过单击 vue js 中的按钮在内容可编辑的 div 中添加一个 div。所以，我正在寻找正确的方法。

var ComponentClass = Vue.extend(AddTag)
  var instance = new ComponentClass({
    propsData: { type: 'primary' }
  })
  instance.$mount() // pass nothing
  this.refs.message.appendChild(instance.$el)

这是我迄今为止尝试过的代码。谢谢

<div class="dropdown-buttons" :contenteditable="false" >
    <el-popover
        width="200px"
        placement="bottom-start"
        trigger="click"
        @show="isDropdownActive = true"
        @hide="isDropdownActive= false"
        >
  <div class="">
    <el-popover
            v-for="(filter, index) in list"
            :key="filter"
            placement="right-start"
            width="200"                
    >
      <div class="sub-filter-listing">
        <div v-for="subFilter in subList[index]" :key="subFilter">
          <span @click="selectSubFilter(subFilter)">{{subFilter}}</span>
        </div>
      </div>
      <el-dropdown-item slot="reference" :command='filter'>
        <div style="display: flex; flex-direction: row; justify-content: space-between;">
          <span class="">{{(filter)}}</span>
          <span style="margin-left: 5px;margin-right: 5px;float: right; font-size: 9px;"><i class="nova-carot-right"></i></span>
        </div>
      </el-dropdown-item>
    </el-popover>
  </div>
  <el-button slot="reference" size="mini" class="sharing-dropdown-select-button">
    <span class="">{{(selectedValue || selectedFilter || 'Select' )}}</span>
    <span class="list-icon"><i class="icon carot-sign" :class="[isDropdownActive ? 'nova-carot-down':'nova-carot-right']"></i></span>
  </el-button>
</el-popover>
</div>

【问题讨论】：

标签： javascript html vue.js append contenteditable

【解决方案1】：

我在这里回答了一个类似的问题：vue, how dynamically, programically, on click add component to the DOM specific place? 但是要扩展关于如何将光标放在插入的子组件之后的答案，我们需要创建一个范围并使用Range.setStartAfter()。然后我们只需使用focus() 将光标设置在我们定义的位置。代码示例：

  var ComponentClass = Vue.extend(Child);
  var instance = new ComponentClass();
  instance.$mount();

  // we have marked ref="editor" on the contenteditable div
  var editableDiv = this.$refs.editor;
  var range = document.createRange();
  var sel = window.getSelection();
  range = sel.getRangeAt(0);
  // check that we are in content editable div
  if (sel.getRangeAt(0).endContainer.parentNode.id === "editor") {
    range.insertNode(instance.$el);
    range.setStartAfter(instance.$el);
    sel.removeAllRanges();
    sel.addRange(range);
    editableDiv.focus();
  }

SANDBOX供您参考。

【讨论】：