PrimeNG羽毛編輯器自定義工具欄

Question

我想用PrimeNG製作羽毛筆編輯器的自定義工具欄。 我採用了棱角分明2.

以下是我在我的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> 

這裏是什麼樣子

但你可以看到ql-list和ql-bullet不所示。

我該怎麼辦？

Answer 1

通告這兩個按鈕的代碼之間的區別：

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

當編輯器呈現的實際代碼。所有你需要做的是用於替換值的屬性，會做的伎倆title屬性：

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

我所做的只是回到那個primeng有和沒有右擊全功能工具欄上>檢查上沒有正確顯示的按鈕的html標籤，我得到正確的代碼來顯示它。