封神者

套件下載：https://ckeditor.com/ckeditor-4/download/
Document文件：https://ckeditor.com/docs/ckeditor4/latest/

官方推薦 Standard Package 版，但是為了功能齊全選擇 Full Package。(不含 Easy Image 所以不勾選)
Easy Image 套件係指 (https://ckeditor.com/cke4/addon/easyimage)

The plugin lets you insert images which are automatically rescaled, optimized, responsive and delivered through a blazing-fast CDN. All this with virtually zero server setup. It introduces a new type of a captioned image widget that has the following capabilities:

• It allows for uploading images to CKEditor Cloud Services with a customizable upload progress indication.
• It allows for adding image captions.
• It supports drag and drop for changing the image position.
• It provides image alignment options through the balloon toolbar attached to the widget as well as the context menu.
• It allows for applying custom styles to the image.
• It allows for changing alternative text for the image.

因為會需要將圖檔上傳到 CKEditor 的雲端伺服器，所以沒測試這個套件如何實裝。如果要支援 RWD則改下載 CKEditor 5。

1. 安裝。下載解壓縮得到 CKEditor 資料夾後直接丟到 ~/javascript/ 底下。
2. 進入sample/ 裡面開啟 index.aspx 頁面，可以參照裡面建議方式 ~/js/CKEditor/config.js 

 3. 使用 Toolbar Configuration 功能，簡化CKEditor的工具列，不簡化也OK只是沒用到的功能icon很礙眼。

[config.js] 內容大致如下：
    config.allowedContent = true;
    config.protectedSource.push(/<i[^>]*><\/i>/g);
    
    contenteditable="true";
    config.language = 'zh';
    //config.uiColor = '#F7B42C';
    //config.height = 300;
    config.toolbarCanCollapse = true;
    config.pasteFilter = 'p; a[!href]';
    config.image_previewText = ' ';
    config.format_tags = 'p;h1;h2;h3;pre';

    // The toolbar groups arrangement, optimized for two toolbar rows.
    //config.toolbarGroups = [
    //    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    //    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    //    { name: 'links' },
    //    { name: 'insert' },
    //    { name: 'forms' },
    //    { name: 'tools' },
    //    { name: 'document', groups: ['mode', 'document', 'doctools'] }
    //    , { name: 'others' }
    //    //, '/'
    //    , { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] }
    //    , { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'] }
    //    , { name: 'styles' }
    //    , { name: 'colors' }
    //    //, { name: 'about' }
    //];