如何从angular 8的priming p-editor的工具栏中删除选项卡? [英] How can I remove tab from the toolbar of primeng p-editor in angular 8?
本文介绍了如何从angular 8的priming p-editor的工具栏中删除选项卡?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是m码.tabIndex =-1"适用于大多数标签,但不适用于select标签和 ql-image".我想从其中删除所有选项卡,并希望焦点直接位于编辑器框中而不是工具中.
This is m code. tabIndex ="-1" works for most of them but it doesnot work with select tag and with "ql-image". I want to remove all the tab from them and want the focus to be directly in editor box instead of tools.
<p-editor #editor required [(ngModel)]="comment.comment" name="comment" class="pEditor"
[style]="{ height: '180px', 'font-size': '1.2em' }">
<p-header>
<span class="ql-formats">
<select class="ql-header" tabindex="-1">
<option value="1" tabindex="-1">Heading</option>
<option value="2" tabindex="-1">Subheading</option>
<option selected tabindex="-1">Normal</option>
</select>
<select class="ql-font" tabindex="-1">
<option selected tabindex="-1">Sans Serif</option>
<option value="serif" tabindex="-1">Serif</option>
<option value="monospace" tabindex="-1">Monospace</option>
</select>
</span>
<span class="ql-formats">
<button class="ql-bold" aria-label="Bold" tabindex="-1"></button>
<button class="ql-italic" aria-label="Italic" tabindex="-1"></button>
<button class="ql-underline" aria-label="Underline" tabindex="-1"></button>
</span>
<span class="ql-formats">
<select class="ql-color" tabindex="2"></select>
<select class="ql-background" tabindex="2"></select>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered" aria-label="Ordered List" tabindex="-1"></button>
<button class="ql-list" value="bullet" aria-label="Unordered List" tabindex="-1"></button>
<select class="ql-align">
<option selected tabindex="-1"></option>
<option value="center" tabindex="-1"></option>
<option value="right" tabindex="-1"></option>
<option value="justify" tabindex="-1"></option>
</select>
</span>
<span class="ql-formats">
<button class="ql-link" aria-label="Insert Link" tabindex="-1"></button>
<button class="ql-image" aria-label="Insert Image" tabindex="-1"></button>
<button class="ql-code-block" aria-label="Insert Code Block" tabindex="-1"></button>
</span>
<span class="ql-formats">
<button class="ql-clean" aria-label="Remove Styles" tabindex="-1"></button>
</span>
</p-header>
</p-editor>
推荐答案
您几乎实现了这一目标,但是在选择框中的错误位置添加了tabindex =-1".
You had almost achieved this but added tabindex="-1" on wrong place in select box.
<select class="ql-header" tabindex="-1">
<p-editor #editor required name="comment" class="pEditor" [style]="{ height: '180px', 'font-size': '1.2em' }">
<p-header>
<span class="ql-formats">
<select class="ql-header" tabindex="-1">
<option value="1" tabindex="-1">Heading</option>
<option value="2" tabindex="-1">Subheading</option>
<option selected tabindex="-1">Normal</option>
</select>
<select class="ql-font" tabindex="-1">
<option selected tabindex="-1">Sans Serif</option>
<option value="serif" tabindex="-1">Serif</option>
<option value="monospace" tabindex="-1">Monospace</option>
</select>
</span>
<span class="ql-formats">
<button class="ql-bold" aria-label="Bold" tabindex="-1"></button>
<button class="ql-italic" aria-label="Italic" tabindex="-1"></button>
<button class="ql-underline" aria-label="Underline" tabindex="-1"></button>
</span>
<span class="ql-formats">
<select class="ql-color" tabindex="-1"></select>
<select class="ql-background" tabindex="-1"></select>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered" aria-label="Ordered List" tabindex="-1"></button>
<button class="ql-list" value="bullet" aria-label="Unordered List" tabindex="-1"></button>
<select class="ql-align" tabindex="-1">
<option selected tabindex="-1"></option>
<option value="center" tabindex="-1"></option>
<option value="right" tabindex="-1"></option>
<option value="justify" tabindex="-1"></option>
</select>
</span>
<span class="ql-formats">
<button class="ql-link" aria-label="Insert Link" tabindex="-1"></button>
<button class="ql-image" aria-label="Insert Image" tabindex="-1"></button>
<button class="ql-code-block" aria-label="Insert Code Block" tabindex="-1"></button>
</span>
<span class="ql-formats">
<button class="ql-clean" aria-label="Remove Styles" tabindex="-1"></button>
</span>
</p-header>
</p-editor>
更新1
primeng不会从选定范围中删除tabindex.
primeng doesn't remove tabindex from selected span.
您必须在ngAfterViewInit方法中将其删除
You have to remove this in your ngAfterViewInit method
ngAfterViewInit() {
const spans = document.getElementsByClassName('ql-picker-label');
for (let i = 0; i < spans.length; i++) {
spans[i].removeAttribute('tabindex');
}
}
这里是stackblitz 链接.
Here is stackblitz link.
这篇关于如何从angular 8的priming p-editor的工具栏中删除选项卡?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文