Using vue-quill-editor, how can I get the html of the input content and have the same display effect as editor inside in the external div?

  javascript, question

I can already use vue-quill-editor to get the html structure of the input text, just likeAuthor DEMO websiteThe same in

For example, we have obtained:

<h1 class="ql-align-center"> <span class="ql-font-serif"><span class="ql-cursor"></span>I am Example 2!</span></span> </h1> <p><br></p> <p><span class="ql-font-serif">Whenever you play the game of thrones, you either win or die. There is no middle ground.</span></p> <p><br></p> <p><strong class="ql-font-serif">Some war against sword and spear to win, and the others the crow and the paper to win.</strong></p> <p><br></p> <p><u class="ql-font-serif">Dead history is write in ink, the living sort in blood.</u></p> <p><br></p> <p><em class="ql-font-serif">They're only numbers. Numbers on paper. Once you understand that, it's easy to make them behave.</em></p> <p><br></p> <p><span class="ql-font-serif">Every time we deal with an enemy, we create two more.</span></p> <p><br></p> <p><span class="ql-font-serif">So the king has decreed. The small council consents.</span></p> <p><br></p> <p><span class="ql-font-serif">Chaos not is a pit, chaos is a ladder.</span></p> <p><br></p> <p><span class="ql-font-serif">A chain needs all sorts of metals, and a land needs all sorts of people.</span></p> <p><br></p> <p><span class="ql-font-serif">When the snows fall and the white winds blow, the lone wolf dies, but the pack survives.</p>

Such a string of html, but after I introduced quill’s three css in another page, the display is very different from what it looks like in the editor. The general structure is

<link href="http://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
 <link href="http://cdn.quilljs.com/1.3.4/quill.bubble.css" rel="stylesheet">
 <link href="http://cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet">
 
 <div style='height:500px;  width:700px;'  >
 <div class='quill-editor'>
 <div class="ql-container">
 <div class='ql-editor'>
 Html available here

The structure is also modeled in the editor, but the display is still very different.

How can I make this string of html display the same as that in the editor?

A solution has been found. Html generated by quill cannot be directly displayed in the editor, even if quill’s css is introduced. The solution is:

Var html=...// this is html obtained through quill.
 Varquill = newquill ('csselecotr',' options})//create a new editor where you want to display it.
 Quill.root.innerHTML=html // Replaces the editor's contents with the ones you obtained.
 Quill.enable(false) // disables the editing function of the editor

In this way, the html generated by quill can be displayed in the place you want, which depends on quill.js