網頁編輯器大家推薦的就 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.
} );
// 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()
});
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();
});
'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