PrimeNG Quill 编辑器自定义工具栏
PrimeNG Quill editor custom toolbar
我想用 PrimeNG 制作一个自定义的 quill editor 工具栏。
我正在使用 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-list
和 ql-bullet
未显示。
我能做什么?
请注意这两个按钮的代码之间的区别:
<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>
我所做的只是回到 primeng 拥有的全功能工具栏,然后右键单击 > 检查未正确显示的按钮的 html 标签,我得到了正确的代码显示它。
您还应该为按钮增加价值:
<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>
我想用 PrimeNG 制作一个自定义的 quill editor 工具栏。 我正在使用 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-list
和 ql-bullet
未显示。
我能做什么?
请注意这两个按钮的代码之间的区别:
<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>
我所做的只是回到 primeng 拥有的全功能工具栏,然后右键单击 > 检查未正确显示的按钮的 html 标签,我得到了正确的代码显示它。
您还应该为按钮增加价值:
<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>