如何删除 PrimeNG 编辑器的选项卡功能答案

【问题标题】：How to remove tab feature for PrimeNG editor如何删除 PrimeNG 编辑器的选项卡功能
【发布时间】：2018-12-10 10:03:43
【问题描述】：

PrimeNG 的富文本编辑器使用 quill 并且通过 JavaScript 设置它具有使用此代码禁用选项卡的功能：

keyboard: {
    bindings: {
        tab: false,
        handleEnter: {
            key: 13,
            handler: function() {
                // Do nothing
            }
        }
    }
}

我可以通过以下方式访问 Angular 中的编辑器：

private quill:any;

@ViewChild(Editor) editorComponent: Editor;

ngAfterViewInit() {
   this.quill = this.editorComponent.quill;
}

但是如何使用 this.quill 对象将 tab 设置为 false？有什么想法吗？

【问题讨论】：

标签： angular primeng quill

【解决方案1】：

似乎在Primeng中我们没有任何方便的方法来实现这一点。它可能在那里，但我什么也没找到。所以我在这里解决这个问题。它可能不是最好的解决方案，但它应该可以解决您的目的。

component.html

<p-editor [style]="{'height':'320px'}" (onInit)="editorcall($event)"></p-editor>

我正在使用 (onInit)，以便我们可以在编辑器加载到 DOM 后立即禁用选项卡。

component.ts

export class EditorComponent {
     public tab = { 
          key:9,
          handler: function() {
              return false;
          }
    };
    editorcall(event:any){
        event.editor.keyboard.bindings[9].length = 0;
        event.editor.keyboard.bindings[9].push(this.tab);
      }
}

我刚刚删除了所有带有密钥代码 9 的引用。这是 Tab 键。为什么我创建了一个新的选项卡对象并在绑定中再次推送它，只是因为每当您单击选项卡时，鼠标指针不应该转到任何其他 HTML 组件。它应该只存在于编辑器中。您可以评论此行//event.editor.keyboard.bindings[9].push(this.tab); 看看副作用。

确保这不会在任何地方破坏您的应用。

【讨论】：

这太棒了！我们进行了可用性测试，问题是那些有屏幕阅读器的人被困在我们的羽毛笔文本编辑器中。所以我评论了你提到的那一行，瞧！先生，您救了我的命！我怎么能找到 .keyboard.bindings 等？您是在文档中还是通过 angular tslint 找到的？
@TuxedoJoe 我没有在 Primeng 文档和 quill 文档中找到这些，我没有深入挖掘。您的问题是找到解决方案的关键。我想如果我们删除所有 Tab 处理程序并传递我们自己的函数，它将返回 false。我很高兴它奏效了。

【解决方案2】：

您需要在创建 Quill 编辑器时添加 tab 键处理程序，目前这不可用，p-editor 的当前实现没有为 quill 编辑器传递任何自定义配置

p-editor

this.quill = new Quill(editorElement, {
  modules: {
      toolbar: toolbarElement
  },
  placeholder: this.placeholder,
  readOnly: this.readonly,
  theme: 'snow',
  formats: this.formats
});

我只找到了这个防止tab键的解决方案

  ngAfterViewInit() {
    this.quill = this.editorComponent.quill;
    if (this.quill) {

     this.quill.keyboard.bindings[9].unshift({
        key: 9,
        handler: function (range) {
          console.log('tab is disabled');
          return false;
        }
      });
    }
  }

stackblitz demo ??

key-bindings

【讨论】：