Question

PrimeNG的RTF编辑器使用羽毛笔，并通过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？有什么想法吗？

Answer 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); 并看到副作用。

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

Answer 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

如何删除PrimeNG编辑器的标签功能

2 个答案: