CKEditor4 使用和問題記錄

CKEditor4 編輯器使用

本篇主要介紹編輯器使用過程中的注意事項和遇到的問題以及如何解決的。

效果

CKEditor4 實現的富文本編輯器的最終效果：

配置和使用

必要的配置（通過一個單獨的 js 文件導出配置）：

export const CKEditorConfig = {
  extraPlugins: ['editorplaceholder', 'image2', 'uploadimage', 'colorbutton', 'colordialog'], // 額外的插件，占位符插件、增強圖像插件、圖像上傳插件
  toolbar: [
    // 自定義工具欄分組顯示，每組之間通過豎線隔開
    // name 表示這個組的名字
    {
      name: 'document',
      items: ['Undo', 'Redo'] // 撤銷、重做
    },
    {
      name: 'styles',
      items: ['Styles'] // 樣式（大字體、小字體、代碼內容等等）
    },
    {
      name: 'format',
      items: ['Format'] // 標題、段落等等
    },
    {
      name: 'basicstyles',
      items: ['Bold', 'Italic', 'Strike', 'RemoveFormat'] // 加粗、傾斜、刪除線、清除格式
    },
    {
      name: 'paragraph',
      items: ['NumberedList', 'BulletedList', 'Outdent', 'Indent', 'Blockquote'] // 有序列表、無序列表、減少縮進量、增加縮進量、塊引用
    },
    {
      name: 'color',
      items: ['TextColor', 'BGColor'] // 文本顏色、背景顏色（BGColor，不是BackgroundColor，不是BgColor）
    },
    {
      name: 'links',
      items: ['Link', 'Unlink'] // 插入超鏈接、取消超鏈接
    },
    {
      name: 'insert',
      items: ['Image', 'Table'] // 圖片、表格
    },
    {
      name: 'tools',
      items: ['Maximize'] //  全屏
    }
  ],
  editorplaceholder: '在這里輸入文字...', // 占位文本
  filebrowserImageUploadUrl: '/editorFileUpload' // 圖片上傳到服務器時，調用的接口，接口應返回圖片在數據庫中的絕對路徑
};

Angular中使用模版：

<ckeditor
  #editor
  [(config)]="editorConfig"
  (ready)="onCKEditorReady()"
  (blur)="onCKEditorBlur()"
  [(ngModel)]="model.editorData"
></ckeditor>

• #editor 模版引用變量
• [(config)] CKEditor 配置項
• ready CKEditor 編輯器 DOM 結構已准備好調用事件
• blur CKEditor 編輯器輸入域失去焦點調用事件
• [(ngModule)] 輸入域中數據，字符串格式

使用過程中遇到的問題和難點

1. 編輯器加載慢

   編輯器加載慢是因為編輯器需要准備很多富文本資源，第一次打開時會比較慢，打開后會將富文本資源做緩存，后面打開就快了。

   解決辦法：我們可以通過一個加載中的動畫來處理用戶等待時間長的問題。

   

   通過在方法 onCKEditorReady 中隱藏動畫達到這個效果。

2. 在 modal 中無法使用表格

   在 modal 彈窗中無法輸入。打開 table 插件，輸入行列數插入表格，會發現無法輸入。

   編輯器彈出窗口上的所有表單控件都是禁用的，例如，如果您試圖添加一個鏈接或圖像，您就不能插入URL或任何描述，因為輸入是禁用的

   解決辦法：我們可以在新的頁面中使用 CKEditor ，而不是 modal 彈窗中。

3. Easy Image Plugin 只能上傳至 CKEditor Cloud Services

   它不會產生任何內容回流，上傳的圖片直接顯示在輸入域中，最后隨其它內容一起上傳到數據庫。可是這種圖片插件只能上傳到 CKEditor Cloud Services，需要在 CKEditor Cloud Services 創建自己的令牌，只有30天免費試用。

   CKEditor Premium Features 30-day free trial

   解決方法： 我們可以使用 Enhanced Image Plugin , 配置其中的 filebrowserImageUploadUrl 屬性。將本地圖片直接上傳至我們自己的服務器中。

   這時候，需要服務端提供一個新的 API 。

   該 API 規則如下：

   

4. Editor Placeholder

   使用 Editor Placeholder 插件

   編輯器占位符插件允許您在編輯器內容為空時顯示占位符文本。占位符幫助用戶在應用程序中定位編輯器，並提示輸入內容。它的工作原理類似於輸入所使用的原生DOM占位符屬性。

   使用該插件會和 HTML 中默認 placeholder 屬性一樣，以灰色字體占位。但如果不使用它，輸入域中默認就是空白，不能給用戶提示。

   extraPlugins: 'editorplaceholder'
   editorplaceholder: '在這里輸入文字...', // 占位文本