In Vue.js, utilize a contenteditable div to dynamically add an HTML element and bind it with v-model

Question

In Vue.js, utilize a contenteditable div to dynamically add an HTML element and bind it with v-model

Below is the HTML code I have written.

<div id="app">

  <button @click="renderHtml">Click to append html</button>
  <div class="flex">
      <div class="message" @input="fakeVmodel" v-html="html" contenteditable="true"></div>
      <div class="message">{{ html }}</div>
  </div>
</div>

Here is the JavaScript part

let app = new Vue({
    el: '#app',
    data: {
        html: 'some text',
    },
    methods: {
        fakeVmodel: function(e){
            this.html = e.target.innerText;
        },
        renderHtml: function(){
          this.html += '<img src="https://cdn-images-1.medium.com/max/853/1*FH12a2fX61aHOn39pff9vA.jpeg" alt="" width=200px>';
        }
    }
});

The issue arises when I click the button to add an HTML tag (img) to my variable (html), it works. However, after typing, it removes the inserted tag part. Is there a way to successfully append HTML code in Vue?

Check out the CodePen example provided here

javascript vue.js contenteditable

Answer 1

Answer №1

The primary issue: The issue lies in the html disappearing due to the line this.html = e.target.innerText;. To resolve this, replace it with this.html = e.target.innerHTML;. The use of innerHTML ensures that the full HTML content is captured.

Secondary concern: Another problem occurs after typing where the cursor jumps to the start of the div. This behavior is caused by v-html triggering updates to the div.

To address this, implement a solution where v-html only triggers updates on focusout.

Complete Sample

let app = new Vue({
  el: '#app',
  data: {
    html: 'some text',
  },
  methods: {
    updateHtml: function(e) {
      this.html = e.target.innerHTML;
    },
    renderHtml: function(){
      this.html += '<img src="https://cdn-images-1.medium.com/max/853/1*FH12a2fX61aHOn39pff9vA.jpeg" alt="" width=200px>';
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
 
  <button @click="renderHtml">click to append html</button>
  <div class="flex">
      <div class="message" @focusout="updateHtml" v-html="html" contenteditable="true"></div>
      <br>
      <div class="message">{{ html }}</div>
  </div>
</div>

Answer 2

The primary issue: The issue lies in the html disappearing due to the line this.html = e.target.innerText;. To resolve this, replace it with this.html = e.target.innerHTML;. The use of innerHTML ensures that the full HTML content is captured.

Secondary concern: Another problem occurs after typing where the cursor jumps to the start of the div. This behavior is caused by v-html triggering updates to the div.

To address this, implement a solution where v-html only triggers updates on focusout.

Complete Sample

let app = new Vue({
  el: '#app',
  data: {
    html: 'some text',
  },
  methods: {
    updateHtml: function(e) {
      this.html = e.target.innerHTML;
    },
    renderHtml: function(){
      this.html += '<img src="https://cdn-images-1.medium.com/max/853/1*FH12a2fX61aHOn39pff9vA.jpeg" alt="" width=200px>';
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
 
  <button @click="renderHtml">click to append html</button>
  <div class="flex">
      <div class="message" @focusout="updateHtml" v-html="html" contenteditable="true"></div>
      <br>
      <div class="message">{{ html }}</div>
  </div>
</div>

In Vue.js, utilize a contenteditable div to dynamically add an HTML element and bind it with v-model

Answer №1

Similar questions

Can the height of one div be determined by the height of another div?

What is causing this setInterval function to run repeatedly?

script to pause video using jQuery

Prevent scrolling within input field

Adjust the size of the plane in Three.js to match the entire view

Is it possible to implement a setInterval on the socket.io function within the componentDidMount or componentDidUpdate methods

Calculate the product of a JavaScript variable and a PHP variable, then show the result on the

Sending an AJAX request to a Symfony controller's URL

I need to press the button two times to successfully submit

Error: $this.text is throwing a TypeError and is not working as a function

Change Node.js version to 6.11.5 on a Windows system

Order an array in Javascript based on the day of the month

Refresh an Angular page automatically

Converting JSON formatting from Object to Array: A Comprehensive Guide

Implementing the use of a partial view in ASP.NET MVC with the help of JavaScript

What is the best way to add an array of JSON objects to another array of JSON objects?

Issue with CSS styles not linking correctly to ejs templates

Automatically fill in Vue files

Debounce fails to honor the specified timeout period

Incorporating a transparent icon onto an HTML background