如何从 angular 8 中的 primeng p-editor 工具栏中删除选项卡？

Question

这是m代码。 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>

Answer 1

您几乎已经做到了这一点，但在 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 不会从 selected 跨度中删除 tabindex。

您必须在 ngAfterViewInit 方法中删除它

ngAfterViewInit() {
  const spans = document.getElementsByClassName('ql-picker-label');
  for (let i = 0; i < spans.length; i++) {
    spans[i].removeAttribute('tabindex');
  }
}

这里是 stackblitz link。

Answer 2

这在 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');
    }
  }

如何从 angular 8 中的 primeng p-editor 工具栏中删除选项卡？

How can I remove tab from the toolbar of primeng p-editor in angular 8?

editor

quill

primeng

angular