在 Angular 中使用 ckeditor 自动完成插件与 ng2-ckeditor 时如何解决 IE/Edge 中的 'Permission denied' 错误

Question

我需要使用 Angular 中的自动完成 CKEditor 插件。我正在使用 ng2-ckeditor 将 CKEditor 与 Angular、Angular 6 一起使用，并使用带有我需要的插件（包括自动完成和文本匹配）的 CKEditor 4.10 的自定义本地分发。当输入 # 字符时，应显示一个项目列表以供自动完成。

这是 ckeditor 组件的 html 片段

<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 浏览器都会抛出 'Permission denied' 错误。

Answer 1

根据它的 Readme，添加 divarea 插件似乎解决了 ng2-ckeditor 的许多问题。

为了添加这个新插件，我使用了CKEditor builder，所以我也更新到CKEDitor的最后一个实际版本4.x（具体是4.11.4）。

现在自动完成在 IE 和 Edge 中都有效，但我不确定解决方案是版本升级还是添加 divarea 插件。

在 Angular 中使用 ckeditor 自动完成插件与 ng2-ckeditor 时如何解决 IE/Edge 中的 'Permission denied' 错误

How to solve 'Permission denied' error in IE/Edge when using ckeditor autocomplete plugin in Angular with ng2-ckeditor

autocomplete

ckeditor

ckeditor4.x

angular