嗨，我正在使用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>
空格折叠为单个空格。编辑器将white-space属性设置为pre以保留它。只需将其添加到您的 CSS 中：
#res {
white-space: pre;
}