I have a small app with an embedded Quill Rich Text Editor. When loading the page I’m receiving HTML code from an external system, the sample content I get is
'<span style="font-weight: bold;">big </span><span style="font-weight: normal;font-style: italic;">big </span><span style="font-weight: normal;text-decoration: underline;">big</span><span style="font-weight: bold;"><br/>n <span style="font-style: italic;"></span></span>'
This looks like valid HTML to me, I can render it
<span style="font-weight: bold;">big </span><span style="font-weight: normal;font-style: italic;">big </span><span style="font-weight: normal;text-decoration: underline;">big</span><span style="font-weight: bold;"><br/>n <span style="font-style: italic;"></span></span>Unfortunately Quill is not able to render it, I can reproduce it in their playground. Head over to the playground and add the following line at the end of the index.js file
quill.root.innerHTML = '<span style="font-weight: bold;">big </span><span style="font-weight: normal;font-style: italic;">big </span><span style="font-weight: normal;text-decoration: underline;">big</span><span style="font-weight: bold;"><br/>n <span style="font-style: italic;"></span></span>'
You can see that the actual output is
which is wrong…
What’s wrong with the HTML code? Or is my code wrong? ( quill.root.innerHTML = ... , I took the example code from the VueQuill repository )
Because this sample code
<p>This is <b>Max Mustermann</b></p><img src='https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg'>
works as expected
