我想为 Quill 文本编辑器设置列表格式（有序、项目符号）、缩进（进、出）、文本颜色、背景文本颜色。
我使用this.quill.format('list',true)这个函数来格式化列表。但它设置为项目符号默认值。我无法设置数字有序列表。我查文件显示使用
{'list':'ordered'}
{'list':'bullet'}
{'indent':'+1'}
像这样。我无法使用 javascript 执行此命令。它给出了参数错误。
我正在使用https://quilljs.com/docs/formats/这种方式传递格式。
Quill 的正确格式是什么？
【问题讨论】：
标签： javascript html quill rich-text-editor
我猜你正在使用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 工具栏包含的所有内容，但由于我使用了插件，还包括一些额外的东西。此外，它还具有工具栏每个部分的工具提示。您可以根据需要对其进行修改，但此自定义包括有序列表和无序列表以及缩进。
【讨论】：
如果你想在 Quill 中格式化一行，你应该使用quill.formatLine()。
而不是使用true 作为列表的值，您也可以指定ordered。所以给出这个文件：
foo
bar
baz
您可以将第二行设置为这样的有序列表：
quill.formatLine(4, 'list', 'ordered');
其中4 是bar 行的开头（因为作为原始字符串，上面看起来像foo\nbar\nbaz）。
【讨论】：