barre d'outils personnalisée PrimeNG Quill éditeur

Question

Je veux faire une barre d'outils personnalisée de l'éditeur de quill avec PrimeNG. J'utilise angulaire 2.

Voici ce que je faisais dans mon code html:

<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> 

Voici ce à quoi il ressemble

Mais comme vous pouvez le voir ql-list et ql-bullet ne sont pas montré.

Que puis-je faire?

Answer 1

Notez la différence entre votre code pour les deux boutons:

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

et le code réel lorsque l'éditeur rend. Tout ce que vous avez à faire est de remplacer l'attribut title pour l'attribut de valeur qui ferait l'affaire:

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

Tout ce que je faisais était de revenir sur la pleine barre d'outils fonctionnalité qui primeng a et ne faites un clic droit> inspection sur les balises html des boutons qui ne s'affichaient pas correctement et j'ai obtenu le bon code pour l'afficher.