RequireJS 搭配 CKEditor

網頁編輯器大家推薦的就

CKEditor 或 TinyMCE，兩套各有優缺點，CKEditor 雖然功能最完整，也是最肥了，雖然官網可以自己挑選 plugin 來簡化肥肥的 source code。如果是單純用在後台管理，我還是推薦 CKEditor，給前端使用者的話，就推薦 TinyMCE 了，畢竟前台還是要以輕量為主。

CKEditor 用法很簡單，官網有提供搭配

jQuery Adapter 的方法，只要 include 下列三個檔案即可。

接著在程式碼載入 CKEditor

$('textarea.editor').ckeditor();

或

$.when( $( '.editors' ).ckeditor().promise ).then( function() {
    // Now all editors have already been created.
} );

那該如何跟

RequireJS 整合，首先設定套件相依性，由於會用到 jQuery

require.config({
  paths: {
    jquery: '../vendor/jquery/jquery',
  },
  shim: {
    'libs/ckeditor/ckeditor': {
        exports: 'CKEDITOR'
    },
    'libs/ckeditor/adapters/jquery': {
        deps: ['jquery', 'libs/ckeditor/ckeditor']
    }
  },
  urlArgs: (new Date()).getTime()
});

接著要使用的時候透過底下載入即可

define([
    'jquery',
    'libs/ckeditor/ckeditor',
    'libs/ckeditor/adapters/jquery'
    ], function($) {
    $('textarea.editor').ckeditor();
});

到這邊沒有問題，接著搭配

r.js，將全部 Javascript 編譯整合成單個檔案，這時候你會發現編譯出來的檔案，無法載入 CKeditor，原因在於 CKeditor 會動態讀取 config.js 及相關設定檔，但是找不到路徑，所以必須在 index.html 內加入 CKEditor 全域路徑變數

window.CKEDITOR_BASEPATH = window.location.pathname + 'assets/js/libs/ckeditor/';

這樣編譯完成的檔案就可以順利載入 CKEditor。 Ref:

How to load ckeditor via requirejs

See also