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空格/缩进未保留

回答

相关问题