Как устранить ошибку «Отказано в доступе» в IE / Edge при использовании плагина автозаполнения ckeditor в Angular с ng2-ckeditor

Question

Мне нужно использовать плагин автозаполнения CKEditor в Angular.Я использую ng2-ckeditor для использования CKEditor с Angular, Angular 6 и пользовательского локального дистрибутива CKEditor 4.10 с необходимыми плагинами (включая autocomplete и textMatch).Когда вводится символ #, для автозаполнения должен отображаться список элементов.

Это HTML-фрагмент для компонента ckeditor

<ckeditor #myCKEditor formControlName="ckeditorControl" [config]="ckeditorConfig"
  debounce="500" (ready)="loadAutocomplete($event)">
</ckeditor>

А вот соответствующий код машинописного текста

import { CKEditorComponent } from 'ng2-ckeditor';
[...]
declare var CKEDITOR: any;
[...]
export class PlantillesAddComponent {
  @ViewChild('myCKEditor') myCKEditor: CKEditorComponent;
  model = MODEL; //List of elements that autocomplete should show
  ckeditorConfig = CKEDITORCONFIG ; // {extraPlugins: 'autocomplete,textmatch', [...]}
  [...]
  loadAutocomplete(event) {
    const config = {
      textTestCallback: this.textTestCallback,
      dataCallback: this.dataCallback,
      outputTemplate: '{value}'
    };
    const editor = event.editor;
    try {
      // This doesn't work in IE/EDGE
      new CKEDITOR.plugins.autocomplete(editor, config);
    } catch (e) {
      console.error('ERROR IN IE/EDGE');
      console.error(e); //'Permission denied error'
    }
  }

  textTestCallback = (range) => {
    if (!range.collapsed) {
      return null;
    }
    return CKEDITOR.plugins.textMatch.match(range, this.matchCallback);
  }

  matchCallback = (text, offset) => {
    const left = text.slice(0, offset),
      match = left.match(/#{1}/);
    if (!match) {
      return null;
    }
    return { start: match.index, end: offset };
  }

  dataCallback = (matchInfo, callback) => {
    const data = this.model.filter(function (item) {
      if (item.name.toLowerCase().indexOf(matchInfo.query.substring(1).toLowerCase()) === 0) {
        if (item.value == null) {
          item.value = '${' + item.name + '}';
        }
        return true;
      }
    });
    callback(data);
  }

}

В Firefox и Chrome, когда в редакторе вводится символ #, список выбираемых элементов отображается правильно;но в IE и Edge это не работает.Проверяя консоль javascript, кажется, что ошибка исходит из этой строки: new CKEDITOR.plugins.autocomplete(editor, config);, в которой выдается ошибка «Отказано в доступе» для обозревателей IE и EDGE.

Answer 1

В соответствии с Readme , похоже, что добавление плагина divarea решает многие проблемы с ng2-ckeditor.

Для добавления этого нового плагина я использовал CKEditorbuilder , поэтому я также обновился до последней актуальной версии CKEDitor 4.x (в частности, 4.11.4).

Теперь автозаполнение работает как в IE, так и в Edge, но я не совсем уверенесли решением было обновление версии или добавление плагина divarea.