Monday, 3 May 2021

Vue js render text with html content

What i'm trying to do is have a root element with a prop that holds inner html like: hello<b>hey</b> but i can't use v-html because this element also has children for example:

<template>
  <component :is="element.tag" contenteditable="true">
    <div contenteditable="false">
      <span class="delete-obj" :id="'delete'+element.id" >delete</span>
    </div>
    <RenderString :string="element.content" />
  </component>
</template>
<script>
    import Vue from "vue";
  
    Vue.component("RenderString", {
        props: {
            string: {
                required: true,
                type: String
            }
        },
        render(h) {
            const render = {
                template:  this.string ,
                methods: {
                    markComplete() {
                        console.log('the method called')
                    }
                }
            }
            return h(render)
        }
    })
    export default {
        name: "VElement",
        props: {
            element: {
                required: false,
                default: null
            },
        },
    }
 </script>

I have tried the above and I have tried using slots, i can solve it with vanilla javascript like element.innerText but i don't want to, the main goal is that the element is editable when they type they are editing element.content that will be rendered and the div that's inside it is normal html that i also need. The main problem is that the inner html that i want doesn't have a root element. The element is something like:

{id:1,tag:"div",content:"hello<b>hey</b>"}

So i want the final result to be:

<div contenteditable="true">
    <div contenteditable="false">
        <span class="delete-obj" :id="'delete'+element.id" >delete</span>
    </div>
    hello<b>hey</b>
<div>

And i want to edit hello<b>hey</b> when i click inside i dont want it wrapped in anything else and if i put v-html on the outer div the inner div is gone



from Vue js render text with html content

No comments:

Post a Comment