javascript - quilljs 空格/缩进没有被保留-6ren

javascript - quilljs 空格/缩进没有被保留

转载作者：行者123 更新时间：2023-12-03 03:41:51

26

4

嗨，我正在使用 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;
}

关于javascript - quilljs 空格/缩进没有被保留，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45584115/

26

4

0

文章推荐： javascript - 一个页面中有多个，需要传递数据

文章推荐： dart - 在 Dart 中将单个订阅流拆分为 2 个流

缩进
我正在使用 libxml2 的 xmlwriter api 编写一个 xml 文件。当我使用记事本打开文件时，缩进不正确。有人知道怎么解决吗？非常感谢。最佳答案我在这里有点冒进，但我会说“缩
python 缩进
我正在尝试让这个脚本工作，但它...给我缩进错误 #!/usr/bin/env python import io myfile = open('stats.txt', 'r') dan = myfil
Emacs 缩进/取消缩进当前行
我使用 Emacs 有一段时间了，我真的很想念一个古老的 Geany 快捷方式 - “C-i”和“C-u”。 “C-i”缩进整个当前行(将鼠标光标保持在原处)，“C-u”取消整个当前行的缩进。我发现
iphone - UILabel文本偏移/缩进
如何向 UILabel 内的文本添加缩进或偏移？它需要是特定的像素大小，与字体大小无关。最佳答案您可以创建另一个UILabel，然后将每个标签的框架设置为一定的宽度，这样，如果您想要实现这一目标，
Emacs Haskell 缩进
请帮我在 Emacs haskell-mode 中设置正确的缩进当我尝试输入诸如 ADT 或记录之类的内容时，按后我进入了错误的列。，然后按不会切换到右边，直到我输入 |或者 ';'! d
子项目符号点的 Visio 缩进
我在 Visio 2010 中有一个项目符号列表，我试图在其中缩进二级项目符号。例如: 我希望“子项目符号”项目向右缩进，这样很明显它是一个子元素。我认为功能区上的“增加缩进”选项可以做到这一点，但这
haskell - 为什么要解析错误？缩进？
我写了这段代码: addNums key num = add [] key num where add res a:as b:bs | a == [] = res
谷歌代码美化 xml 缩进
我在生成的 xml 文档中添加了换行符。 "\n" some text etc."\n" "\n" 这最终应该是: some text etc. 这是否可以通过 google-code-pre
java - JTabbedPane 缩进
使用 JTabbedPane 时，如何缩进选项卡？ Swing 默认输出: ------- --------- ------ | A | | B | | C | --------
javascript - CoffeeScript 缩进
我收到这些行的缩进错误有没有在线验证器可以帮助我？ showAliveTests : (pageIndex, statusFilter) -> data= pageI
将循环语句添加到现有代码时的 Python 缩进
在 Python 中，当你写了 100 行代码而忘记在某个地方添加一堆循环语句时，你会怎么做？我的意思是，如果您在某处添加一个 while 语句，您现在必须缩进它下面的所有行。这不像您可以戴上牙套并
html - CSS 缩进
我喜欢这样做，如 indesign 或 quark...段落缩进...图片如何在 html 和 css 中做到这一点的正确方法我不希望文字环绕图像...我喜欢保护整个左边的部分给图片留边距就可以了
css -
缩进
我试过添加 10px 的内边距但没有成功。你可以看到它的一个例子lower down on this page . #menu li { float: left;
python - python中简单while循环的问题(缩进)
这个问题在这里已经有了答案: I'm getting an IndentationError. How do I fix it? (6 个答案) 关闭去年。 while 1 == 1:
C# 打印空格/缩进
您好，我正在尝试使用来自 C# 应用程序的收据打印机打印帐单/收据。预期的输出是这样的: ITEM NAME QTY PRICE Banana Large Y
java - JTextPane 缩进
有没有办法在 JTextPane 中缩进一段文本？ import javax.swing.*; import java.awt.*; import javax.swing.text.StyledDoc
c - 缩进#define
我知道 #define 等通常从不缩进。为什么？我目前正在编写一些代码，其中混合了#define、#ifdef、#else s、#endifs 等。所有这些通常与普通 C 代码混合在一起。 #def
哈希数组的 YAML 缩进
我认为缩进在 YAML 中很重要。我在 irb 中测试了以下内容: > puts({1=>[1,2,3]}.to_yaml) --- 1: - 1 - 2 - 3 => nil 我期待这样的事情:
Vim:C++ 用 # 缩进
我在带有 openmp 语句的 C++ 代码中使用 Vim。而在我的 ~/.vimrc set ai " auto indent 我的问题:当我使用 openmp 语句(以 # 开头)时，光标会跳
parsing - 使用 Megaparsec 缩进
我想使用 Megaparsec 解析一种基本的缩进语言。最初我使用的是 Parsec，我设法通过缩进正常工作，但现在我遇到了一些麻烦。我一直在关注一个教程here这是我必须解析一种忽略缩进的语言的代

首页

博学

6Ren·AI

商城

javascript - quilljs 空格/缩进没有被保留