jQuery動態載入CKEditor注意事項
最近在寫標註工具的API，完成之前沒有好好做的載入器(loader)，目標是要讓人用一行程式碼就能載入全部需要的工具。
在我做的KALS標註工具當中使用到了CKEditor，而要讓他與jQuery搭配，則需要額外載入一個調配器(adapters)。但是傳統的用法都是在<head>寫<script>標籤，這跟我要的動態載入不太一樣。
在四處碰壁嘗試之後，終於找到了正確的作法。在此做個筆記。
不可用的方法
由於我是要在網頁讀取完之後才開始動態載入，因此不能用document.write，否則會洗掉整個網頁。
原本我也想利用DOM建立<script>標籤，內含src屬性載入CKEditor，插入<head>當中，但卻發現這個插入的<script>標籤並不會執行，簡單來說就是沒有效果。
後來改用jQuery的getScript()方法，就能夠確實地讀取並執行CKEditor。不過仍有其他細節需要注意，以下說明。
正確的方法
正確的作法是：
- 建立<script src=”[CKEditor的網址]”></script>貼到<head>之中，供CKEditor本身去搜尋連結，自動載入其他檔案。
- 以jQuery.getScript()載入並執行CKEditor。
- 先載入CKEditor主程式，再載入調配器。
以下是簡單的範例程式碼：
//在這之前，你已經確認載入了jQuery
//路徑宣告
var _ckeditor_url = "/ckeditor/ckeditor.js";
var _adapters_url = "/ckeditor/adapters/jquery.js";
//載入函式
var _load_lib = function (_url, _callback) {
var _script_tag = $('<script type="text/javascript" src="' + _url + '"></script>');
_script_tag.appendTo($('head'));
$.getScript(_url, function () {
if (typeof(_callback) == 'function')
_callback();
});
};
//開始載入
_load_lib(_ckeditor_url, function () {
_load_lib(_adapters_url, function () {
//你接下來要做的其他程式
});
});
這是截自KALS載入器的部分程式，並沒有經過測試。有任何錯誤，請提醒我再檢查、修正。
