Search code examples
htmlcssvue.jsprose-mirror

HTML characters are not transalated during render

I have some js code which renders the following HTML

<div contenteditable="false" tabindex="0" class="ProseMirror">
    <p> didn&#039;t project a significant increase</p>
</div>

In the browser, it actually displays the characters #039; instead of converting it to ' is there a way to force/prevent the browser from doing this conversion?

Solution

  • When rendering an HTML entity, it may need to be compiled. You can use one of these options:

    • Interpolation

    <p> didn{{ `&#039;` }}t project a significant increase</p>

    • v-html

    <p> didn<span v-html="`&#039;`"></span>t project a significant increase</p>

    Note that these first two examples are using a template literal, not single quotes.

    • Render function

    If using a render function, you can set the innerHTML domProps:

    render(h) {
  return h('span', {
    domProps: {
      innerHTML: 'didn&#039;t project a significant increase'
    }
  });
}

    Here is a demo

    Original

    You're missing an &, it should be:

    <p> didn&#039;t project a significant increase</p>