PrimeNG Quill-Editor benutzerdefinierte Symbolleiste

Question

Ich möchte eine benutzerdefinierte Symbolleiste von Federkern-Editor mit PrimeNG machen. Ich bin mit Angular 2.

Hier ist, was ich in meinem HTML-Code tat:

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

Hier ist, wie es

sieht Aber wie Sie ql-list und ql-bullet sind nicht sehen können, gezeigt.

Was kann ich tun?

Answer 1

Beachten Sie den Unterschied zwischen Ihrem Code für diese beiden Tasten:

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

und der eigentliche Code, wenn der Editor macht. Alles, was Sie tun müssen, ist das Titelattribut für den Wert Attribut zu ersetzen, die den Trick tun würde:

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

Alles, was ich war, um wieder auf die volle Feature-Symbolleiste zu gehen hat, die primeng hat, und klicken Sie haben Recht> zu überprüfen auf Die HTML-Tags der Schaltflächen, die nicht richtig angezeigt wurden, und ich habe den richtigen Code, um es anzuzeigen.