RequireJS 搭配 CKEditor

requirejs-logo
網頁編輯器大家推薦的就 CKEditorTinyMCE,兩套各有優缺點,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