Angular 填充纬管编辑器自定义工具栏

我想做一个自定义工具栏的羽毛编辑器与素描。 我用的是Angular 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列表

和

ql项目符号

未显示

---

我能做什么

请注意这两个按钮的代码之间的差异：

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

以及编辑器渲染时的实际代码。您只需将title属性替换为value属性即可：

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

---

我所做的只是回到Priming拥有的全功能工具栏上，右键单击>检查未正确显示的按钮的html标记，我得到了正确的代码来显示它

多谢各位！我已经查看了完整的功能标签，但没有找到，或者我没有找到：/I我在查找所有工具栏选项列表时看到了你的帖子（谢谢）当我注意到你丢失了这些按钮时，我计算了Priming是如何渲染这些按钮的，我马上就知道不同的属性会导致渲染图标和留白之间的不同。@WilliamMatias你能看看这个问题吗，如果你有任何线索，请告诉我