使用vue-quill-editor，獲得到輸入內(nèi)容的html，怎樣才能在外部的div中有跟編輯器里一樣的顯示效果

我已經(jīng)能使用vue-quill-editor獲得到輸入文本的html結(jié)構(gòu)了，就像作者DEMO網(wǎng)站中的一樣

比如獲得到：

<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之后，顯示的跟在編輯器中的樣子差別很大。大概結(jié)構(gòu)是

  <link  rel="stylesheet">
  <link  rel="stylesheet">
  <link  rel="stylesheet">

  <div style='height:500px;width:700px;'>
    <div class='quill-editor'>
      <div class="ql-container">
        <div class='ql-editor'>
        ...//在這里放得到的html

結(jié)構(gòu)也是模仿編輯器中的，可是顯示的還是很不一樣。

怎么才能讓得到的這串html顯示的跟在編輯器中的一樣呢？

回答

編輯回答

陌上花

hi，

問題的解決很簡單，并不用引入執(zhí)行 quill.js。

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

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

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

2018年4月11日 18:27

編輯回答

尛憇藌

你這種解決方式雖然能解決問題，但并不是想要的效果，估計是你那塊地方寫錯了，一般只要引入css樣式文件即可，可以用chrome調(diào)試一下

2017年9月27日 07:08

編輯回答

硬扛

已經(jīng)找到解決辦法了。通過quill產(chǎn)生的html不能直接顯示成編輯器中的樣子，即使引入quill的css也不行。解決方法就是：

var html=...//這個是通過quill獲取到的html
var quill= new Quill('css selecotr',{options})  //在想顯示的地方新建一個編輯器
quill.root.innerHTML=html  //將編輯器的內(nèi)容替換成自己獲得的內(nèi)容
quill.enable(false)  //禁用編輯器的編輯功能

這樣就能將quill產(chǎn)生的html顯示在自己想要的地方了，就是必須要依賴quill.js才行

2017年11月7日 20:17

編輯回答