【问题标题】: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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-08-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多