![](/img/trans.png)
[英]How can I remove tab from the toolbar of primeng p-editor in angular 8?
[英]Issue with format and size selection drop downs on PrimeNG p-editor toolbar
我将 PrimeNg 8.1.1 与 Angular 8.2.5 和 quill 1.3.7 一起使用。 向编辑器 header 工具栏添加大小菜单时遇到问题。 选定的菜单项隐藏在下拉指示器后面,而不是如图所示与菜单项的右侧对齐。
我已经尝试为编辑器配置 header,如下所示,但我仍然遇到问题。
<p-header>
<select class="ql-size">
<option value="small">Tiny</option>
<option selected></option>
<option value="large">Subheading</option>
<option value="huge">Heading</option>
</select>
<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>Left</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>
<select title="Font Family"class="ql-font">
<option selected></option>
<option value="serif">Serif</option>
<option value="monospace">Monospace</option>
</select>
</span>
</p-header>
我的适用于下面的代码
<p-header>
<span class="ql-formats">
<select class="ql-header" defaultValue="0">
<option value="1">Heading</option>
<option value="2">Subheading</option>
<option value="0">Normal</option>
</select>
<select class="ql-font">
<option></option>
<option value="serif"></option>
<option value="monospace"></option>
</select>
</span>
<span class="ql-formats">
<button class="ql-bold" type="button"></button>
<button class="ql-italic" type="button"></button>
<button class="ql-underline" type="button"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button
class="ql-list"
value="ordered"
type="button"
></button>
<button
class="ql-list"
value="bullet"
type="button"
></button>
<select class="ql-align">
<option defaultValue></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
</span>
<span class="ql-formats">
<button class="ql-link" type="button"></button>
<button class="ql-code-block" type="button"></button>
<button class="ql-clean" type="button"></button>
</span>
<p-header>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.