I have implemented a ponent that use contenteditable="true" to get possibility of edit content on this div (like a textarea).

Follow a snippet from my code:

export default {
  name: 'divArea',
  props: ['value'],
  mounted() {
    this.$el.innerHTML = this.value;
  },
  methods: {
    updateHTML(e) {
      const html = e.target.innerHTML;
      this.$emit('input', html);
    },
  },
}

<template>
  <div contenteditable="true"
    v-once
    v-html="value"
    @input="updateHTML"
    @paste="onPaste"
    class="txtArea"></div>
</template>

I have implemented a ponent that use contenteditable="true" to get possibility of edit content on this div (like a textarea).

Follow a snippet from my code:

export default {
  name: 'divArea',
  props: ['value'],
  mounted() {
    this.$el.innerHTML = this.value;
  },
  methods: {
    updateHTML(e) {
      const html = e.target.innerHTML;
      this.$emit('input', html);
    },
  },
}

<template>
  <div contenteditable="true"
    v-once
    v-html="value"
    @input="updateHTML"
    @paste="onPaste"
    class="txtArea"></div>
</template>

I’m trying to implement a paste feature in this area to copy a block of content from an html page but I would like to have only text version after paste operation (no html).

Currently I use v-html attribute with a prop on my ponent because I need to add an html custom tag on pasted text but only if user click on a button.

How can I do to implement this behavior?

• javascript
• vue.js
• vuejs2

Share Improve this question Follow asked Feb 22, 2019 at 8:17 sergioskasergioska 34511 gold badge55 silver badges1818 bronze badges 2

• You might want to look into Vue markdown, here's an example. – Yom T. Commented Feb 22, 2019 at 8:27
• Thank you @jom but this example use a library (marked.js) – sergioska Commented Feb 22, 2019 at 8:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

First contenteditable is a real Devil and I remend to not use it but anyway that was my solution

        let contenteditable = document.querySelector('[contenteditable]')
        contenteditable.addEventListener('paste', function(e){           
            // Prevent the default pasting event and stop bubbling            
            e.preventDefault()
            e.stopPropagation()
            // Get the clipboard data
            let paste = (e.clipboardData || window.clipboardData).getData('text/plain')

            // Do something with paste like remove non-UTF-8 characters            
            paste = paste.replace(/\x0D/gi, "\n")          
            e.target.textContent += paste
        })

the second part if you want to add the paste where the cursor was

  instead of 
            e.target.textContent += paste

you can use Selection()

       // Find the cursor location or highlighted area
        const selection = window.getSelection()
        // Cancel the paste operation if the cursor or highlighted area isn't found
        // if (!selection.rangeCount) return false
        // Paste the modified clipboard content where it was intended to go            
        if(selection.getRangeAt(0).collapsed){
            // TextareaManager.AddToCursor(document.createTextNode(paste))
            if(selection.getRangeAt(0).endContainer.nodeName != "DIV"){
                selection.getRangeAt(0).insertNode(document.createTextNode(paste))
            }else {
                e.target.childNodes[0].textContent += paste
            }
            selection.getRangeAt(0).collapse(false)
        }else {
           e.target.appendChild(document.createTextNode(paste))
        }

but I would like to have only text version after paste operation (no html).

You can create a DOM element or use DOMParser() to set the value of the <textarea> and get the .textContent of the element.

const textarea = document.querySelector("textarea");
let parser = new DOMParser();
let parsedHTML = parser.parseFromString(textarea.value, "text/html");
console.log(parsedHTML.body.textContent);

<textarea style="width:240px;height:50px;">
  <div>a<span>b</span><b>c</b></div>
</textarea>