[英]How can I add validation using ql-image on p-editor in angular?
[英]How can I remove tab from the toolbar of primeng p-editor in angular 8?
這是米碼。 tabIndex ="-1" 適用於大多數,但不適用於 select 標簽和“ql-image”。 我想從它們中刪除所有選項卡,並希望焦點直接位於編輯器框中而不是工具中。
<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>
您幾乎已經實現了這一點,但在 select 框中的錯誤位置添加了 tabindex="-1" 。
<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。
您必須在 ngAfterViewInit 方法中刪除它
ngAfterViewInit() { const spans = document.getElementsByClassName('ql-picker-label'); for (let i = 0; i < spans.length; i++) { spans[i].removeAttribute('tabindex'); } }
這是 stackblitz鏈接。
這對我有用 angular 9。
ngAfterViewInit() {
const test = this.pEditor.el.nativeElement;
const elements = test.querySelectorAll('.ql-picker-label');
for (let i = 0; i < elements.length; i++) {
elements[i].removeAttribute('tabindex');
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.