:::

jQuery動態載入CKEditor注意事項

image

最近在寫標註工具的API,完成之前沒有好好做的載入器(loader),目標是要讓人用一行程式碼就能載入全部需要的工具。

在我做的KALS標註工具當中使用到了CKEditor,而要讓他與jQuery搭配,則需要額外載入一個調配器(adapters)。但是傳統的用法都是在<head>寫<script>標籤,這跟我要的動態載入不太一樣。

在四處碰壁嘗試之後,終於找到了正確的作法。在此做個筆記。


不可用的方法

由於我是要在網頁讀取完之後才開始動態載入,因此不能用document.write,否則會洗掉整個網頁。

原本我也想利用DOM建立<script>標籤,內含src屬性載入CKEditor,插入<head>當中,但卻發現這個插入的<script>標籤並不會執行,簡單來說就是沒有效果。

後來改用jQuery的getScript()方法,就能夠確實地讀取並執行CKEditor。不過仍有其他細節需要注意,以下說明。

正確的方法

正確的作法是:

  1. 建立<script src=”[CKEditor的網址]”></script>貼到<head>之中,供CKEditor本身去搜尋連結,自動載入其他檔案。
  2. 以jQuery.getScript()載入並執行CKEditor。
  3. 先載入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載入器的部分程式,並沒有經過測試。有任何錯誤,請提醒我再檢查、修正。

0 意見:

留言工具: