问题描述
我想为 quill 文本编辑器设置列表格式（有序、项目符号）、缩进（入、出）、文本颜色、背景文本颜色。
我使用 this.quill.format('list',true) 这个函数来格式化列表。但它设置为项目符号默认值。我无法设置数字排序列表。我查文档显示使用
- 订单列表 =>
{'list':'ordered'} - 无序 =>
{'list':'bullet'} - 缩进 =>
{'indent':'+1'}就像那样。
我无法使用 javascript 执行此命令。它给出了参数错误。
我使用 https://quilljs.com/docs/formats/ 这种方式传递格式。
quill 的正确格式方式是什么？
解决方法
我猜您使用 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）。
这是一个working example