4

I need to add a dynamically imported component, just add a virtual tag to specific place in DOM structure. Unfortunately, every method that I found, didn't solve my problem.

How I try it first:

parent component (Editor.vue):

<template>
  <div>
    <div class="toolbar">
        <button @click="addContainer">ADD CONTAINER</button>
    </div>
    <div id="editor" ref="editor" contenteditable="true">
       //here, when in conteneditable div is coursor I need to add dynamically, programically virtual tag <container />
    </div>        
  </div>
</template>

and javascript

<script>
import container from '../container/Container.vue';

export default {
  name: "editor",
  components: {
    container
  },
  data() {
    return {};
  },
  methods: {
    addContainer(){          
      document.execCommand('insertHTML', false, <container />); // execCommand let me add html in specyfic place, but I have error Unexpected token

    }
  },
};

And child component that has to be adding how many times user need in exactly place then user need (Container.vue)

<template>
  <div
    class="container editor--space"
    @mouseover="highlightIn"
    @mouseout="highlightOut"
    contenteditable="true"
  >
    <div
      class="editor--labelspace"
      v-if="showLabel"
      contenteditable="false"
    >
      container
    </div>
    {{ container }}
  </div>
</template>

and javascript

<script>
export default {
  name: "container",
  data() {
    return {
      showLabel: false,
      container: "Container here ..."
    };
  },
  methods: {
    highlightIn(){
      this.showLabel = true;
    },
    highlightOut(){
      this.showLabel = false;
    }
  }
};
</script>

Maybe someone can give me some idea, how to do this?

TomH
  • 105
  • 9
  • how does your script now that you have inserted the component? Do you store insertion to database? – webprogrammer Jan 25 '20 at 20:03
  • I want to store to database this code: `"Some text, some bold text, and inserted image from this component , another text and html tags."` But I can only get from `contenteditable` this generated html: `"Some text, some bold text, and inserted image from this component , another text and html tags."`. How can I do that? – webprogrammer Jan 25 '20 at 20:06

1 Answers1

2

By the help of this: https://stackoverflow.com/a/2925633/7741865 and by dynamically creating the child components, you should achieve what you want. Sample:

addContainer() {
  // dynamically create component, replace 'Child' with your component
  var ComponentClass = Vue.extend(Child);
  var instance = new ComponentClass();
  instance.$mount();

  // get the caret position and insert component at that place
  var sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      range.insertNode(instance.$el);
      // remove the highlight (if you want)
      window.getSelection().removeAllRanges();
    }
  }
}

SANDBOX

AT82
  • 71,416
  • 24
  • 140
  • 167
  • I want to insert image component with click event into contenteditable div. How can I use v-model of that component to generate only tag? How can I restore that component and insert it again from database? – webprogrammer Jan 21 '20 at 18:55
  • I voted up this answer. It looks like this is what I was searching for but have a few questions about how to use it in my component. – webprogrammer Jan 21 '20 at 18:56
  • 1
    @webprogrammer, If you want to insert just an image, change the `Child` template to just have an image, and pass the url to the child. This should get your started: https://codesandbox.io/s/vue-template-m1ypk What you mean with the database is unclear. If that sandbox doesn't help, consider asking a new question :) – AT82 Jan 21 '20 at 19:37
  • ok, I will ask new question. Thank you for new codesandbox with an image. – webprogrammer Jan 21 '20 at 19:58
  • I have created extended question to my questions here https://stackoverflow.com/questions/59849554/how-to-insert-vue-component-into-contenteditable-div . Can you take a look when you will have a time? Thank you! – webprogrammer Jan 21 '20 at 21:37
  • have you looked to my question at the link from my previous comment? – webprogrammer Jan 23 '20 at 07:30
  • Is it possible to call the function from the mounted hook instead of on click? – Md. Helal Uddin Apr 22 '20 at 18:11