html - How to set format list (ordered,bullet) ,indent(in,out), text color, background text color in Quill using simple javascri

admin•2025-04-17 15:55:59•questions•阅读0

I want to set the format of a list (ordered, bullet), indent(in, out), text color, background text colo

I want to set the format of a list (ordered, bullet), indent(in, out), text color, background text color to the Quill text editor. I used this.quill.format('list',true) this function to format list. But it set to bullet default. I can not set the number ordered list. I check the document shows the use

Orderlist => {'list':'ordered'}
Unordered => {'list':'bullet'}
Indent => {'indent':'+1'} like that.

I can't execute this mand using javascript. it gives parameter error.

I am using / this way to pass format.

What is the correct way of format for Quill?

Orderlist => {'list':'ordered'}
Unordered => {'list':'bullet'}
Indent => {'indent':'+1'} like that.

I can't execute this mand using javascript. it gives parameter error.

I am using https://quilljs./docs/formats/ this way to pass format.

What is the correct way of format for Quill?

Share Improve this question edited Apr 6, 2021 at 4:10 asked Apr 5, 2021 at 14:28 Dhanraja 2211 gold badge3 silver badges13 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

I guess you are using ngx-quill because of the tag. You can override the default Quill toolbar and create a custom toolbar. You just need to specify your customization inside the <quill-editor> </quill-editor> tag.

Try to add this code between <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>

This is my customization, and includes everything that the default Quill toolbar include, but includes some extra things because of the plugins that I used. Also, it has the tooltips for each section of the toolbar. You can modified it how you need it, but this customization includes both the ordered and unordered lists, as well as indents.

If you want to format a line in Quill, you should be using quill.formatLine().

Rather then use true for the value of your list, you can also specify ordered. So given this document:

foo
bar
baz

You can set the second line to be an ordered list like this:

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

Where 4 is the start of the bar line (because as a raw string, the above looks like foo\nbar\nbaz).

Here's a working example

This is for anybody ing here in the future for answers.

Here is how i handled a similar issue

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

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

quill.format("list", "ordered");

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744133121a4559931.html