CKEditor4 兼容 IE11 和 IE10 使用調研

CKEditor 編輯器調研

CKEditor 編輯器，通過安裝插件達到我們想要的功能，包括但不限於可以配置用戶接口、編輯器尺寸、插入圖片、插入內容、樣式和格式、文檔處理、UI、自定義工具條等等。功能強大，這里調研 CKEditor 編輯器。

CKEditor5

CKEditor 5 編輯器不兼容 IE11

CKEditor4-Angular

CKEditor4-Angular 不支持 IE10

CKEditor4

如果需要兼容 IE10 , 則需要使用 CKEditor4。
已測試在 IE11 和 IE10 下顯示正常，且無報錯。

下面詳細介紹 CKEditor 在 Angular 中的使用方法。

環境介紹及需要安裝的組件介紹：

• angular: ~9.1.12
• ckeditor4: ^4.15.1
• load-script: ^1.0.0
• mutationobserver-shim: ^0.3.7
• classlist.js: ^1.1.20150312
• web-animations-js: ^2.3.2
• zone.js: ~0.10.2

load-script 在實例化 ckeditor4 時需要使用到，后面幾款是幫助做 IE 兼容性處理的。

1. 兼容 IE10

第一步：修改 tsconfig.json 放棄差異化加載

compilerOptions.target: "es5",
angularCompilerOptions.enableIvy: false

{
  ...
  "compilerOptions": {
    ...
    "target": "es5",
    ...
  },
  "angularCompilerOptions": {
    ...
    "enableIvy": false
    ...
  }
  ...
}

第二步：在 src/polyfills.ts 中加入下列補丁

import 'classlist.js'; // Run `npm install --save classlist.js`.
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
import 'zone.js/dist/zone'; // Included with Angular CLI.
import 'core-js/es/array';
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/set';
import 'core-js';
import 'mutationobserver-shim';

第三步：安裝依賴

npm install mutationobserver-shim classlist.js web-animations-js zone.js

2. 安裝 CKEditor4

npm install ckeditor4 load-script

將 /node_modules/ckeditor4/ 目錄下的全部文件及文件夾拷貝到 /assets/ 下面。ckeditor4 里面的文件動態加載，例如 ckeditor.js 依賴 config.js, zh-ch.js。必須在當前項目目錄下有這些文件。

3. 使用 CKEditor4

以在 appComponent 里使用為例
app.component.ts 從 https://github.com/ckeditor/ckeditor4-angular/blob/master/src/ckeditor/ckeditor.helpers.ts 獲取而來

<textarea name="editor" id="editor" rows="10" cols="80">
    <!-- 初始化內容 -->
  This is my textarea to be replaced with CKEditor.
</textarea>

import { AfterViewInit, Component, OnInit } from '@angular/core';
import loadScript from 'load-script';
declare let CKEDITOR: any;  // 聲明 CKEDITOR

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, AfterViewInit {
  promise: Promise<{ [key: string]: any }>;

  constructor() {}

  ngOnInit(): void {}

  ngAfterViewInit(): void {
    // 待視圖加載完成
    const path = `/assets/ckeditor4/ckeditor.js`; // ckeditor.js 路徑
    this.getEditorNamespace(path)
      .then(() => {
        CKEDITOR.replace('editor');
      })
      .catch(console.error);
  }

  getEditorNamespace(editorURL: string): Promise<{ [key: string]: any }> {
    if (editorURL.length < 1) {
      return Promise.reject(
        new TypeError('CKEditor URL must be a non-empty string.')
      );
    }

    if ('CKEDITOR' in window) {
      return Promise.resolve(CKEDITOR);
    } else if (!this.promise) {
      this.promise = new Promise((scriptResolve, scriptReject) => {
        loadScript(editorURL, (err) => {
          if (err) {
            scriptReject(err);
          } else {
            scriptResolve(CKEDITOR);
          }

          this.promise = undefined;
        });
      });
    }

    return this.promise;
  }
}

最終效果圖

最終效果圖如下：

ckeditor 的 UI 語言是根據用戶系統語言來默認選擇的，不需要手動修改。