quilljs空格/縮進未保留

您好，我正在使用quilljs進行簡單的富文本編輯。我有一個體面的工作解決方案，但我面臨的一個問題是，當我保存編輯器空間的內容正在丟失。這裏是下面的代碼輸入一些圖像，並把它放在它的前面，然後點擊保存按鈕來查看當前輸出。quilljs空格/縮進未保留

預計：應保留空格/縮進。

代碼：

<html> 

<!-- Include stylesheet --> 
<link href="https://cdn.quilljs.com/1.3.1/quill.snow.css" rel="stylesheet"> 

<!-- Create the editor container --> 
<body> 
<div id="editor"> 
    <p>Hello World!</p> 
    <p>Some initial <strong>bold</strong> text</p> 
    <p><br></p> 
</div> 
<input type=button onclick="savei()" value="save"/> 
</body> 
<hr> 
<div id="res"></div> 
</html> 
<!-- Include the Quill library --> 
<script src="https://cdn.quilljs.com/1.3.1/quill.js"></script> 
<script src="img-resize.js"></script> 

<!-- Initialize Quill editor --> 
<script> 

      var toolbarOptions = [ 
       ['bold', 'italic', 'underline', 'strike'],  // toggled buttons 
       ['blockquote', 'code-block'], 

       [{ 'header': 1 }, { 'header': 2 }],    // custom button values 
       [{ 'list': 'ordered'}, { 'list': 'bullet' }], 
       [{ 'script': 'sub'}, { 'script': 'super' }],  // superscript/subscript 
       [{ 'indent': '-1'}, { 'indent': '+1' }],   // outdent/indent 
       [{ 'direction': 'rtl' }],       // text direction 

       [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown 
       [{ 'header': [1, 2, 3, 4, 5, 6, false] }], 
       [ 'link', 'image', 'video', 'formula' ],   // add's image support 
       [{ 'color': [] }, { 'background': [] }],   // dropdown with defaults from theme 
       [{ 'font': [] }], 
       [{ 'align': [] }], 

       ['clean']           // remove formatting button 
      ]; 

     var quill = new Quill('#editor', { 
      modules: { 
       toolbar: toolbarOptions 
      }, 

      theme: 'snow' 
     }); 


function savei(){ 
console.log(quill.getContents()) 
var x = document.getElementById("res"); 
x.innerHTML = quill.root.innerHTML; 
console.log(x); 
} 
</script>

來源

2017-08-09 anekix

白色空間被壓縮成一個空間。編輯器將white-space屬性設置爲pre，它將保留該屬性。只需將其添加到您的CSS：

#res { 
    white-space: pre; 
}

來源

2018-01-07 02:28:05 RDay

quilljs空格/縮進未保留

回答

相關問題