使用vue-quill-editor，获得到输入内容的html，怎样才能在外部的div中有跟编辑器里一样的显示效果

Question

我已经能使用vue-quill-editor获得到输入文本的html结构了，就像作者DEMO网站中的一样

比如获得到：

<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>

这样的一串html，但是我在另一个页面中，引入quill的三个css之后，显示的跟在编辑器中的样子差别很大。大概结构是

  <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

结构也是模仿编辑器中的，可是显示的还是很不一样。

怎么才能让得到的这串html显示的跟在编辑器中的一样呢？

Answer 1

已经找到解决办法了。通过quill产生的html不能直接显示成编辑器中的样子，即使引入quill的css也不行。解决方法就是：

var html=...//这个是通过quill获取到的html
var quill= new Quill('css selecotr',{options})  //在想显示的地方新建一个编辑器
quill.root.innerHTML=html  //将编辑器的内容替换成自己获得的内容
quill.enable(false)  //禁用编辑器的编辑功能

这样就能将quill产生的html显示在自己想要的地方了，就是必须要依赖quill.js才行

Answer 2

hi，

问题的解决很简单，并不用引入执行 quill.js。

在你需要展示的页面中用如下元素包裹即可

<div class="ql-container ql-snow">
    <div class="ql-editor">
    </div>
</div>

ql 的样式需要在全局 main.js 中引入即可

Answer 3

用v-html绑定一下就行了，加上class="ql-editor"的话，样式就和富文本录入的一样了，建议自己写样式，美观一点。

Answer 4

你这种解决方式虽然能解决问题，但并不是想要的效果，估计是你那块地方写错了，一般只要引入css样式文件即可，可以用chrome调试一下

Answer 5

关于把class name的方式使用样式改成style的，你可以看看这篇文章
https://www.cnblogs.com/calvi...