How can I add a component in a content-editable div in vue js

Question

I want to add a div inside a content-editable div on a click of a button in vue js. So, I'm looking for the correct way to do it.

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

This is the code I'have tried so far. Thanks

<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>

@AJT82, Thanks for replying. This is appending the component correctly but then I'm not able to write further, as cursor is gone and I'm not been able to add cursor to the end and start writing again. — Abhishek Matta, Aug 12 '20 at 10:34
@AJT82 do yo know a way to delete the component(which is loaded using this way) when clicked on a button to remove. — Abhishek Matta, Sep 10 '20 at 11:08

score 1 · Accepted Answer · answered Aug 12 '20 at 12:44

I have answered a similar question here: vue, how dynamically, programically, on click add component to the DOM specific place? But to expand the answer on how to place the cursor after the inserted child component, we need to create a range and use Range.setStartAfter(). Then we simply use focus() to set the cursor where we have defined. Code sample:

  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 for your reference.

Thanks for the answer, but my child component its a dropdown so focus didn't work for me because I want cursor to be added after my child component. Can you help me with this? I have also shared my child component in the question — Abhishek Matta, Aug 18 '20 at 06:21
[SANDBOX](https://codesandbox.io/s/vue-template-forked-k4rni?file=/App.vue) — Abhishek Matta, Aug 21 '20 at 04:05

How can I add a component in a content-editable div in vue js

1 Answers1