H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

我已经能使用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显示的跟在编辑器中的一样呢?

回答:

已经找到解决办法了。通过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才行

回答:

hi,

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

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

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

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

回答:

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

回答:

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

回答:

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

本文地址:H5W3 » 使用vue-quill-editor,获得到输入内容的html,怎样才能在外部的div中有跟编辑器里一样的显示效果

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址