如何使用简单的javascript在Quill中设置格式列表（有序，项目符号），缩进（入，出），文本颜色，背景文本颜色

问题描述 投票：0回答：3

我想在 Quill 文本编辑器中设置列表的格式（有序、项目符号）、缩进（入、出）、文本颜色、背景文本颜色。 我使用 

this.quill.format('list',true)
这个函数来格式化列表。但它设置为默认项目符号。我无法设置号码排序列表。我查看文档显示了用途

  1. 订单列表 => 
    {'list':'ordered'}
  2. 无序 => 
    {'list':'bullet'}
  3. 缩进 => 
    {'indent':'+1'}
    像那样。

我无法使用 JavaScript 执行此命令。它给出参数错误。

我正在使用https://quilljs.com/docs/formats/这种方式来传递格式。

Quill 的正确格式是什么？

javascript html quill rich-text-editor
3个回答
2
投票

我猜你正在使用

ngx-quill
，因为
tag
。您可以覆盖默认的 Quill 工具栏并创建自定义工具栏。您只需在 
<quill-editor> </quill-editor>
标签内指定您的自定义即可。

尝试在 

<quill-editor> </quill-editor>
:

之间添加此代码 

 <div quill-editor-toolbar>

                    <span class="ql-formats">
                      <button class="ql-bold" ngbPopover="Bold" triggers="mouseenter:mouseleave"></button>
                      <button class="ql-italic" ngbPopover="Italic" triggers="mouseenter:mouseleave"></button>
                      <button class="ql-underline" ngbPopover="Underline" triggers="mouseenter:mouseleave"></button>
                      <button class="ql-strike" ngbPopover="Strikethrough" triggers="mouseenter:mouseleave"></button>
                    </span>

                    <span class="ql-formats">
                      <button class="ql-blockquote" ngbPopover="Blockquote" triggers="mouseenter:mouseleave"></button>
                      <button class="ql-code-block" ngbPopover="Code block" triggers="mouseenter:mouseleave"></button>
                    </span>

                    <span class="ql-formats">
                      <button class="ql-list" value="ordered" ngbPopover="Ordered list" triggers="mouseenter:mouseleave"></button>
                      <button class="ql-list" value="bullet" ngbPopover="Bulleted list" triggers="mouseenter:mouseleave"></button>
                    </span>

                    <span class="ql-formats">
                      <button class="ql-script" value="sub" ngbPopover="Subscript" triggers="mouseenter:mouseleave"></button>
                      <button class="ql-script" value="super" ngbPopover="Superscript" triggers="mouseenter:mouseleave"></button>
                    </span>

                    <span class="ql-formats">
                      <button class="ql-indent" value="-1" ngbPopover="Indent -1" triggers="mouseenter:mouseleave"></button>
                      <button class="ql-indent" value="+1" ngbPopover="Indent +1" triggers="mouseenter:mouseleave"></button>
                    </span>

                    <span class="ql-formats">
                      <button class="ql-direction" value="rtl" ngbPopover="Text direction" triggers="mouseenter:mouseleave"></button>
                    </span>

                    <span class="ql-formats" ngbPopover="Font size" triggers="mouseenter:mouseleave">
                      <select class="ql-size">
                        <option value="small"></option>
                        <option selected></option>
                        <option value="large"></option>
                        <option value="huge"></option>
                      </select>
                    </span>

                    <span class="ql-formats" ngbPopover="Text color" triggers="mouseenter:mouseleave">
                      <select class="ql-color">
                        <option selected></option>
                        <option value="#e60000"></option>
                        <option value="#ff9900"></option>
                        <option value="#ffff00"></option>
                        <option value="#008a00"></option>
                        <option value="#0066cc"></option>
                        <option value="#9933ff"></option>
                        <option value="#ffffff"></option>
                        <option value="#facccc"></option>
                        <option value="#ffebcc"></option>
                        <option value="#ffffcc"></option>
                        <option value="#cce8cc"></option>
                        <option value="#cce0f5"></option>
                        <option value="#ebd6ff"></option>
                        <option value="#bbbbbb"></option>
                        <option value="#f06666"></option>
                        <option value="#ffc266"></option>
                        <option value="#ffff66"></option>
                        <option value="#66b966"></option>
                        <option value="#66a3e0"></option>
                        <option value="#c285ff"></option>
                        <option value="#888888"></option>
                        <option value="#a10000"></option>
                        <option value="#b26b00"></option>
                        <option value="#b2b200"></option>
                        <option value="#006100"></option>
                        <option value="#0047b2"></option>
                        <option value="#6b24b2"></option>
                        <option value="#444444"></option>
                        <option value="#5c0000"></option>
                        <option value="#663d00"></option>
                        <option value="#666600"></option>
                        <option value="#003700"></option>
                        <option value="#002966"></option>
                        <option value="#3d1466"></option>
                      </select>
                    </span>

                    <span class="ql-formats" ngbPopover="Background color" triggers="mouseenter:mouseleave">

                      <select class="ql-background">
                        <option value="#000000"></option>
                        <option value="#e60000"></option>
                        <option value="#ff9900"></option>
                        <option value="#ffff00"></option>
                        <option value="#008a00"></option>
                        <option value="#0066cc"></option>
                        <option value="#9933ff"></option>
                        <option selected></option>
                        <option value="#facccc"></option>
                        <option value="#ffebcc"></option>
                        <option value="#ffffcc"></option>
                        <option value="#cce8cc"></option>
                        <option value="#cce0f5"></option>
                        <option value="#ebd6ff"></option>
                        <option value="#bbbbbb"></option>
                        <option value="#f06666"></option>
                        <option value="#ffc266"></option>
                        <option value="#ffff66"></option>
                        <option value="#66b966"></option>
                        <option value="#66a3e0"></option>
                        <option value="#c285ff"></option>
                        <option value="#888888"></option>
                        <option value="#a10000"></option>
                        <option value="#b26b00"></option>
                        <option value="#b2b200"></option>
                        <option value="#006100"></option>
                        <option value="#0047b2"></option>
                        <option value="#6b24b2"></option>
                        <option value="#444444"></option>
                        <option value="#5c0000"></option>
                        <option value="#663d00"></option>
                        <option value="#666600"></option>
                        <option value="#003700"></option>
                        <option value="#002966"></option>
                        <option value="#3d1466"></option>
                      </select>
                    </span>

                    <span class="ql-formats"  ngbPopover="Font" triggers="mouseenter:mouseleave">
                      <select class="ql-font">
                        <option selected></option>
                        <option value="serif"></option>
                        <option value="monospace"></option>
                      </select>
                    </span>

                    <span class="ql-formats" ngbPopover="Alignment" triggers="mouseenter:mouseleave">
                      <select class="ql-align">
                        <option selected></option>
                        <option value="center"></option>
                        <option value="justify"></option>
                        <option value="right"></option>
                      </select>
                    </span>

                    <span class="ql-formats">
                      <button class="ql-clean" ngbPopover="Clear all formatting" triggers="mouseenter:mouseleave"></button>
                    </span>

                    <span class="ql-formats">
                      <button class="ql-link" ngbPopover="Link" triggers="mouseenter:mouseleave"></button>
                      <button class="ql-image" ngbPopover="Image" triggers="mouseenter:mouseleave"></button>
                      <button class="ql-video" ngbPopover="Video" triggers="mouseenter:mouseleave"></button>
                    </span>

</div>

这是我的自定义，包含默认 Quill 工具栏包含的所有内容，但由于我使用的插件而包含一些额外的内容。此外，它还具有工具栏每个部分的工具提示。您可以根据需要对其进行修改，但此自定义包括有序列表和无序列表以及缩进。

1
投票

如果您想在 Quill 中设置线条格式，您应该使用 

quill.formatLine()
。

您也可以指定 

true
，而不是使用 
ordered
作为列表的值。因此给出这份文件：

foo
bar
baz

您可以将第二行设置为有序列表，如下所示：

quill.formatLine(4, 'list', 'ordered');

其中 

4
是 
bar
行的开头（因为作为原始字符串，上面看起来像 
foo\nbar\nbaz
）。

这是一个工作示例

0
投票

这是为了任何将来来这里寻求答案的人。

这是我处理类似问题的方法

const quill = quillRef.current.getEditor();
const hasList = quill.getFormat().list;

if (hasList) {
   quill.format("list", false);
   return;
}

quill.format("list", "ordered");
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.