Как удалить вкладку для редактора PrimeNG

Question

В редакторе форматированного текста 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?Есть идеи?

Answer 1

Вам необходимо добавить обработчик клавиш табуляции, когда вы создаете редактор Quill. В настоящее время он недоступен, текущая реализация для p-редактора не проходит обычную настройку для редактора quill

p-editor

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

Я нашел это решение только для клавиши предотвращения табуляции

  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 ??

ключ-привязок

Answer 2

Похоже, что в 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. ЧтоКлавиша табуляции.Почему я создал новый объект табуляции и снова вставил его в привязки, просто потому, что всякий раз, когда вы нажимаете на вкладку, указатель мыши не должен идти ни в какой другой компонент HTML.Он должен быть там только внутри редактора.Вы можете прокомментировать эту строку //event.editor.keyboard.bindings[9].push(this.tab); и увидеть побочный эффект.

Убедитесь, что это не сломает ваше приложение в любом месте.