PrimeNG Quill editor custom toolbar

Question

I want to make a custom toolbar of quill editor with PrimeNG. I am using Angular 2.

Here is what I did in my html code :

    <p-editor [(ngModel)]="message" [style]="{'height':'320px'}">
        <p-header>
          <span class="ql-formats">
            <select class="ql-size">
              <option value="small">Petit</option>
              <option selected></option>
              <option value="large">Sous-titre</option>
              <option value="huge">Titre</option>
            </select>
          </span>
          <span class="ql-formats">
            <button class="ql-bold" aria-label="Bold"></button>
            <button class="ql-italic" aria-label="Italic"></button>
            <button class="ql-underline" aria-label="Underline"></button>
            <button class="ql-strike" aria-label="Strike"></button>
          </span>
          <span class="ql-formats">
            <select title="Text Color" class="ql-color" defaultValue="rgb(0, 0, 0)">
              <option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)"></option>
              ...
              <option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
            </select>
            <span class="ql-format-separator"></span>
            <select title="Background Color" class="ql-background" defaultValue="rgb(255, 255, 255)">
              <option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)"></option>
              ...
              <option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
            </select>
        </span>
          <span class="ql-formats">
            <button class="ql-list" title="List"></button>
            <button class="ql-bullet" title="Bullet"></button>
            <select title="Text Alignment" class="ql-align" >
              <option selected>Gauche</option>
              <option value="center" label="Center"></option>
              <option value="right" label="Right"></option>
              <option value="justify" label="Justify"></option>
            </select>            
          </span> 
          <span class="ql-formats">
            <button aria-label="Link" class="ql-link"></button>
            <button aria-label="Image" class="ql-image"></button>
          </span>
        </p-header>
      </p-editor>

Here is what it looks like

But as you can see ql-list and ql-bullet are not shown.

What can I do ?

William Matias · Accepted Answer · 2017-09-19 18:29:37Z

14

Notice the difference between your code for those two buttons:

 <button class="ql-list" title="List"></button>
 <button class="ql-bullet" title="Bullet"></button>

and the actual code when the editor renders. All you have to do is to replace the title attribute for the value attribute that would do the trick:

<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>

All I did was to go back on the full feature toolbar that primeng has and did right click > inspect on the html tags of the buttons that weren't displaying correctly and I got the right code to display it.

answered Sep 19, 2017 at 18:29

William Matias

3543 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

anais1477 Over a year ago

Thank you very much ! I've looked into the full feature tags but i haven't find this , or i missed it :/

William Matias Over a year ago

I ran into your post when I was looking for a list of all toolbar options (thanks for that) and when I noticed you were missing those buttons I figured how primeng renders these buttons and I instantly knew that a different in attributes can make the different between rendering the icons or just leaving it blank.

Prashant Agrawal Over a year ago

@WilliamMatias can you please look at issue stackoverflow.com/questions/61889006/…, and let me know if you have any clue

ouflak · Accepted Answer · 2022-02-03 21:39:20Z

0

You should also add value to buttons:

<span class="ql-formats">
   <button type="button" class="ql-list" aria-label="List" value='ordered'></button>
   <button type="button" class="ql-list" aria-label="Bullet" value='bullet'></button>
</span>

edited Feb 3, 2022 at 21:39

ouflak

2,56310 gold badges46 silver badges53 bronze badges

answered Jan 29, 2022 at 13:11

Fatih B.

12 bronze badges

Comments

Gokul Arasan · Accepted Answer · 2025-06-17 12:40:15Z

0

<p-editor [modules]="editorModules"></p-editor>

const editorModules= {
  toolbar: [
    [],
    ['bold', 'italic', 'underline', 'strike'],
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'align': [] }],
    [{ 'color': [] }, { 'background': [] }],
    ['image', 'link']
  ]
};

Try this in newer version

edited Jun 17 at 12:40

answered Jun 17 at 12:39

Gokul Arasan

11 bronze badge

Collectives™ on Stack Overflow

PrimeNG Quill editor custom toolbar

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related