上回企圖將公司工作日誌系統的 HTML 編輯器改為 TinyMCE, 改換之後卻出現了一個奇怪的問題, 就是某台電腦的 IE11 無法顯示 TinyMCE 的按鈕 icon, 其他台電腦都沒問題, 比較 IE 版本都一樣啊! 而且 Chrome 與 Firefox 都無問題 (可見 IE 真是無可救藥的爛), 卡在一台沒辦法用, 無奈只好改回原來的 CKEditor 編輯器.
昨天正想要修改 EasyuiCMS 目錄結構, 發現 TinyMCE 已經版為 4.3.4, 我就想說該不會已經解決 icon 問題了吧? 於是下載最新版, 替換工作日誌 plug-ins 下的舊版, 測試結果還是不行. 我又再去網搜這個問題, 這回找到新線索 :
# TinyMCE : Toolbar icons not appearing
在這篇文章中提到兩個解法, 一是要加上 <!DOCTYPE html>, 二是要把 TinyMCE 的 textarea 元素上的 !important 樣式標記去掉, 因為它可能會破壞掉樣式設定. 而在下面這篇文章中則有不同解法 :
# tinymce 4.0 : toolbar icons not showing up in IE
它是建議在 head 裡面添加下列針對 IE 支援的 meta 元素 :
<meta http-equiv="X-UA-Compatible" content="IE=edge">
上面三個建議我全部都採用, 在 admin.asp 中加上 meta 元素, 結果真的有效! 但糟糕的是現在不知道哪一個才是真正的解決關鍵, 我應該一個一個去改才對. 因為每次改都要進電腦機房去改, 一堆門禁密碼很麻煩, 先擱著吧, 下一次要改的時候再來試試看. 總之, 就是暫時解決了一個困擾我很久的問題.
其他參考 :
# How to add an Access-Control-Allow-Origin header
2016年2月23日 星期二
2015年12月5日 星期六
如何在網頁中使用網頁編輯器 CKEDITOR
這兩天為了解決公司工作日誌中的舊版網頁編輯器 FCKEDITOR 在 IE10 以上無法運作問題, 找到了這款 CKEDITOR, 基本上符合我要求 (例如超連結可以設 target 在新視窗開啟等), 下面紀錄如何將此 Javascript 函式庫使用在我的 ASP 網頁專案上.
首先到 CKEDITOR 首頁下載最新版函式庫 (目前是 4.5.5 版), 下載 Standard 版本即可, 安裝方式都一樣 :
# http://ckeditor.com/download
解壓縮 ckeditor_4.5.5_standard.zip 後會在目前資料夾下產生一個 ckeditor 資料夾, 目錄結構如下 :
然後就可以開始撰寫測試網頁了, 如下 test.html 所示 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 測試</title>
<script src="ckeditor.js"></script>
</head>
<body>
<form>
<textarea id="editor1">
Hello World! 這是 CKeditor!
</textarea>
</form>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>
參考 :
# http://docs.ckeditor.com/#!/guide/dev_installation
這裡最重要的當然是匯入 ckeditpr.js 這個函式庫, 由於 test.html 是放在 ckeditor 下, 所以這裡不需要加上相對路徑. 如果專案是放在 Internet 上, 則可以使用 CDN 供檔, 如此就不用自己準備上面這些環境 :
<script src="//cdn.ckeditor.com/4.5.5/standard/ckeditor.js"></script>
參考 :
# http://cdn.ckeditor.com/
其次是要用一個表單元件 textarea 當作編輯器的容器, 而且務必指定 id 屬性, 像這裡我只用到一個編輯器, 如果有多個, 就可以取名 editor2, editor3, ... 或任何其他名稱. 最後是用 Javascript 程式來將 textarea 變裝為美美的 HTML 編輯器, 很簡單, 只要呼叫 CKEDITOR 物件的 replace() 函數, 傳入 textarea 的 id 即可 :
CKEDITOR.replace("editor1");
用瀏覽器檢視 test.html 結果如下 :
介面比十幾年前的 FCKEDITOR 漂亮. 它預設會將寬度撐大到父容器的寬度, 即使 textarea 有設定 cols (行數) 也是一樣, 所以 rows 與 cols 其實都不用設.
接下來是要如何用在我的 myasp 專案上呢? 我的工作日誌系統裡的 JLOG 子系統中的 add_task_form (新增工作) 模組就是要用到 HTML 編輯器以儲存來自 email 或 WORD 的內容, 我把原來套用的 FCKEDITOR 移除, 改換為 CKEDITOR 如下 :
case "add_task_form" : {
%>
...
<form method="post" action="admin.asp?op=jlog&tab=jlog&function=add_task">
...
<textarea id="editor1"></textarea>
<script src="plug-in/ckeditor/ckeditor.js"></script>
<script>CKEDITOR.replace('editor1');</script>
...
...
<input type="button" onclick="check_addtask(this.form)" value="新增">
<input type="hidden" name="task_content" value="">
<script language="javascript">
function check_addtask(formObj) {
var content=CKEDITOR.instances.editor1.getData();
... (對 content 進行處理, 例如去除可能的 form 元素, 以免兩層表單)
formObj.task_content.value=content; //處理後放入隱藏元素
formObj.submit();
}
</script>
<form>
<%
break;
}
在這個範例中, 我有一個新增工作的表單, 放在 add_task_form 模組裡, 當按下新增工作按鈕時, 就會向伺服器提出 admin.asp?op=jlog&tab=jlog&function=add_task_form 這個 URL 要求, 在 admin.asp 所含括的 jlog.asp 程式裡, 經過解析 URL 路徑後, 就會進入上述的 case, 向前端展示一個輸入表單, 其中最重要的便是填入工作內容, 因為所紀錄的工作牽涉各方寄來的 email, WORD 或 EXCEL 內容等, 為了求真實以及閱讀方便 (開啟附檔多一道操作程序), 內容少的就直接貼到工作紀錄裡, 內容太多太複雜的就以附檔上傳處理, 這樣要追蹤工作就比較方便. 要記錄這三種多媒體內容就必須用到像 CKEDITOR 這種網頁編輯器.
由於我把 ckeditor 目錄放在我的專案 myasp/plug-in 子目錄下, 因此要匯入 cckeditor.js 時必須指明相對路徑. 填好工作內容, 按下 "新增" 按鈕時, 會執行前端 Javascript : check_addtask() 方法, 首先是要取出 CKEDITOR 的資料內容, 這要呼叫 CKEDITOR 物件中的 textarea 實體的 getData() 方法來取得 :
var content=CKEDITOR.instances.editor1.getData();
參考 :
# http://docs.ckeditor.com/#!/guide/dev_savedata
然後做一些輸入欄位值的檢查, 例如有些欄位是必填不得空白, 特別是禁止在工作內容中輸入另一張表單, 這會造成表單套疊, 使程式無法運作, 所以須去除 form 元素. 最後將調整後的輸入內容放入隱藏的 task_content 元素裡再 submit 表單.
如果貼上來自網頁, email 或 WORD 等內容時, 在 Chrome 瀏覽器會因為安全性設定的關係跳出一個視窗來讓我我們貼資料 :
但在 IE11 就直接貼上去了, 可能 IE11 對剪貼簿的安全性設定預設較鬆.
如此便完成了這次的工作日誌改版, 於 IE11, Chrome 等瀏覽器測試均無問題, 暫時可以應付這次的升版要求矣. 這個解決方案也將移植到以 PHP 開發的新版工作日誌上, 其實 ASP, JSP 與 PHP 這三種技術就像孿生兄弟一樣. 一通百通.
CKEDITOR 物件是可以設定的, 例如預設語言, 以及要顯示哪些功能按鈕等, 參考 :
# http://docs.ckeditor.com/#!/guide/dev_configuration
在上面的範例中, 我們僅使用 textarea 的 id 屬性來建立 CKEDITOR 物件, 但根據 API 文件, 其實用 name 也是可以的, 或者兩個都用亦可, 不過建議僅使用 id 就可以, 參見下面文件中關於 replace() 的敘述 :
# http://docs.ckeditor.com/#!/api/CKEDITOR-method-replace
由此文件可知, replace() 方法會以一個 CKEditor 物件來取代 DOM 中的 textarea 或 dir 元素, 除了傳入 textarea 的 id 或 name 外, 還可傳入一個 config 物件實體來初始化 CKEditor 物件的設定值, 也就是將預設的設定值覆蓋掉 :
replace(element, [config])
關於 config 物件實體之屬性可參考 :
# http://docs.ckeditor.com/#!/api/CKEDITOR.config
在上面的範例中, 編輯器預設會偵測作業系統語言, 顯示中文介面, 而且會撐到 100% 父容器寬度, 我們可以用 config 指定語為英文, 寬度為 800px 如下 :
CKEDITOR.replace('editor1', {width:800,language:'en'} );
寬度也可以用百分比, 但必須用引號括起來, 例如 :
CKEDITOR.replace('editor1', {width:'50%',language:'en'} );
如果不想讓使用者直接編輯 html 原始碼, 可以用 removePlugins 屬性來取消 "原始碼" 按鈕 :
CKEDITOR.replace('editor1', {removePlugins:'sourcearea'});
# how to disable source button in ckeditor 4
如果對工具列的排列方式不滿意, 可以利用 toolbarGroups 屬性來設定, 它將同類型的工具按鈕合為一群, 範例如下 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 測試</title>
<script src="ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor2">
Hello World! 這是 CKeditor!
</textarea>
</form>
<script>
var tg=[{name:'clipboard',groups:['clipboard','undo']},
{name:'editing',groups:['find','selection','spellchecker']},
{name:'links'},
{name:'insert'},
{name:'forms'},
{name:'tools'},
{name:'document',groups:['mode','document','doctools']},
{name:'others'},
'/',
{name:'basicstyles',groups:['basicstyles','cleanup']},
{name:'paragraph',groups:['list','indent','blocks','align','bidi']},
{name:'styles'},
{name:'colors'},
{name:'about'}];
CKEDITOR.replace('editor1', {toolbarGroups:tg,removePlugins:'sourcearea'});
</script>
</body>
</html>
這裡跳行要用斜線 "/", 排列效果如下 :
也可以用 toolbars 屬性直接設定工具列要放哪些按鈕, 範例如下 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 測試</title>
<script src="ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor2">
Hello World! 這是 CKeditor!
</textarea>
</form>
<script>
var toolbar=[['Cut','Copy','Paste','PasteText','PasteFromWord',
'Undo','Redo'],
['Scayt','SpellChecker'],
['Link','Unlink','Anchor'],
['Image','Table','HorizontalRule','Smiley',
'SpecialChar','PageBreak'],
['Maximize'],
'/',
['Bold','Italic',
'Underline','Strike','Subscript',
'Superscript','-','RemoveFormat'],
['NumberedList','BulletedList','-','Outdent','Indent',
'-','Blockquote'],
['Styles','Format'],
['About']];
CKEDITOR.replace('editor1',{toolbar:toolbar});
</script>
</body>
</html>
這裡使用二維陣列來宣告要顯示的工具按鈕, 然後在 replace() 的 config 參數中設為 toolbar 屬性之值即可, 效果與上面用 toolbarGroups 的完全一樣. 注意, 每一個一維陣列就是一個工具列群組, 群組內的按鈕可用 "-" 再分出子群. 如果需要顯示原始碼按鈕, 可以添加 ['Source'].
如果把 toolbar 屬性設為 null, 就會顯示此 package (basic/standard/full) 的全部工具列 :
CKEDITOR.replace('editor1',{toolbar:null});
此外還有一點要注意, 有些在完整版才有的工具列按鈕 (例如文字的前景與背景色 TextColor 與 BgColor) 在標準版設了也不會出現, 因此如果需要自訂工具列的話, 最好下載 Full 版來改裝.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 測試</title>
<script src="http://cdn.ckeditor.com/4.5.5/full/ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor2">
Hello World! 這是 CKeditor!
</textarea>
</form>
<script>
var toolbar=[['Cut','Copy','Paste','PasteText','PasteFromWord',
'Undo','Redo'],
['Scayt','SpellChecker'],
['Link','Unlink','Anchor'],
['Image','Table','HorizontalRule','Smiley',
'SpecialChar','PageBreak'],
['Maximize'],
['About'],
'/',
['Bold','Italic',
'Underline','Strike','Subscript',
'Superscript','-','RemoveFormat'],
['NumberedList','BulletedList','-','Outdent','Indent',
'-','Blockquote'],
['Styles','Format'],
['TextColor','BGColor']];
CKEDITOR.replace('editor1',{toolbar:toolbar});
</script>
</body>
</html>
如果不想在每一個要用到 CKEDITOR 的網頁中進行設定, 其實可以在 CKEDITOR 資料夾中找到一個 config.js, 只要在這裡做設定, 所有專案中用到 CKEDITOR 的網頁都會套用相同設定, 範例如下 :
CKEDITOR.editorConfig=function(config) {
// Define changes to default configuration here. For example:
//config.language = 'en';
//config.uiColor = '#AADC6E';
config.toolbar = [['Cut','Copy','Paste','PasteText','PasteFromWord',
'Undo','Redo'],
['Scayt','SpellChecker'],
['Link','Unlink','Anchor'],
['Image','Table','HorizontalRule','Smiley',
'SpecialChar','PageBreak'],
['Maximize'],
'/',
['Bold','Italic',
'Underline','Strike','Subscript',
'Superscript','-','RemoveFormat'],
['NumberedList','BulletedList','-','Outdent','Indent',
'-','Blockquote'],
['Styles','Format'],
['TextColor','BGColor'],
['About']];
};
CKEDITOR 很棒的地方是提供客製化套件, 在下載頁面點選 "Let me customerize CKEditor", 再按下載鈕 :
然後點選 basic/stadard/full, 於下方將需要的工具按鈕移到右方再下載, 這樣它會將設定都寫在 config,js 中. 不過工具列 plugin 實在玲瑯滿目, 要從中挑選也是個問題.
參考 :
# 讓 CKEditor 更好用
首先到 CKEDITOR 首頁下載最新版函式庫 (目前是 4.5.5 版), 下載 Standard 版本即可, 安裝方式都一樣 :
# http://ckeditor.com/download
 |
將此 ckeditor 資料夾整個複製到我的專案目錄 myasp/plug-in/ 底下, 大小為 3.22MB, 如果要減重, 可以刪掉 samples 資料夾, 三個 .md 檔, 以及 lang 底下用不到的語言檔, 只留下 en.js 與 zh.js 即可, 這樣可減重到 2.7MB 以下 :
然後就可以開始撰寫測試網頁了, 如下 test.html 所示 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 測試</title>
<script src="ckeditor.js"></script>
</head>
<body>
<form>
<textarea id="editor1">
Hello World! 這是 CKeditor!
</textarea>
</form>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>
參考 :
# http://docs.ckeditor.com/#!/guide/dev_installation
這裡最重要的當然是匯入 ckeditpr.js 這個函式庫, 由於 test.html 是放在 ckeditor 下, 所以這裡不需要加上相對路徑. 如果專案是放在 Internet 上, 則可以使用 CDN 供檔, 如此就不用自己準備上面這些環境 :
<script src="//cdn.ckeditor.com/4.5.5/standard/ckeditor.js"></script>
參考 :
# http://cdn.ckeditor.com/
其次是要用一個表單元件 textarea 當作編輯器的容器, 而且務必指定 id 屬性, 像這裡我只用到一個編輯器, 如果有多個, 就可以取名 editor2, editor3, ... 或任何其他名稱. 最後是用 Javascript 程式來將 textarea 變裝為美美的 HTML 編輯器, 很簡單, 只要呼叫 CKEDITOR 物件的 replace() 函數, 傳入 textarea 的 id 即可 :
CKEDITOR.replace("editor1");
用瀏覽器檢視 test.html 結果如下 :
介面比十幾年前的 FCKEDITOR 漂亮. 它預設會將寬度撐大到父容器的寬度, 即使 textarea 有設定 cols (行數) 也是一樣, 所以 rows 與 cols 其實都不用設.
接下來是要如何用在我的 myasp 專案上呢? 我的工作日誌系統裡的 JLOG 子系統中的 add_task_form (新增工作) 模組就是要用到 HTML 編輯器以儲存來自 email 或 WORD 的內容, 我把原來套用的 FCKEDITOR 移除, 改換為 CKEDITOR 如下 :
case "add_task_form" : {
%>
...
<form method="post" action="admin.asp?op=jlog&tab=jlog&function=add_task">
...
<textarea id="editor1"></textarea>
<script src="plug-in/ckeditor/ckeditor.js"></script>
<script>CKEDITOR.replace('editor1');</script>
...
...
<input type="button" onclick="check_addtask(this.form)" value="新增">
<input type="hidden" name="task_content" value="">
<script language="javascript">
function check_addtask(formObj) {
var content=CKEDITOR.instances.editor1.getData();
... (對 content 進行處理, 例如去除可能的 form 元素, 以免兩層表單)
formObj.task_content.value=content; //處理後放入隱藏元素
formObj.submit();
}
</script>
<form>
<%
break;
}
在這個範例中, 我有一個新增工作的表單, 放在 add_task_form 模組裡, 當按下新增工作按鈕時, 就會向伺服器提出 admin.asp?op=jlog&tab=jlog&function=add_task_form 這個 URL 要求, 在 admin.asp 所含括的 jlog.asp 程式裡, 經過解析 URL 路徑後, 就會進入上述的 case, 向前端展示一個輸入表單, 其中最重要的便是填入工作內容, 因為所紀錄的工作牽涉各方寄來的 email, WORD 或 EXCEL 內容等, 為了求真實以及閱讀方便 (開啟附檔多一道操作程序), 內容少的就直接貼到工作紀錄裡, 內容太多太複雜的就以附檔上傳處理, 這樣要追蹤工作就比較方便. 要記錄這三種多媒體內容就必須用到像 CKEDITOR 這種網頁編輯器.
由於我把 ckeditor 目錄放在我的專案 myasp/plug-in 子目錄下, 因此要匯入 cckeditor.js 時必須指明相對路徑. 填好工作內容, 按下 "新增" 按鈕時, 會執行前端 Javascript : check_addtask() 方法, 首先是要取出 CKEDITOR 的資料內容, 這要呼叫 CKEDITOR 物件中的 textarea 實體的 getData() 方法來取得 :
var content=CKEDITOR.instances.editor1.getData();
參考 :
# http://docs.ckeditor.com/#!/guide/dev_savedata
然後做一些輸入欄位值的檢查, 例如有些欄位是必填不得空白, 特別是禁止在工作內容中輸入另一張表單, 這會造成表單套疊, 使程式無法運作, 所以須去除 form 元素. 最後將調整後的輸入內容放入隱藏的 task_content 元素裡再 submit 表單.
但在 IE11 就直接貼上去了, 可能 IE11 對剪貼簿的安全性設定預設較鬆.
如此便完成了這次的工作日誌改版, 於 IE11, Chrome 等瀏覽器測試均無問題, 暫時可以應付這次的升版要求矣. 這個解決方案也將移植到以 PHP 開發的新版工作日誌上, 其實 ASP, JSP 與 PHP 這三種技術就像孿生兄弟一樣. 一通百通.
CKEDITOR 物件是可以設定的, 例如預設語言, 以及要顯示哪些功能按鈕等, 參考 :
# http://docs.ckeditor.com/#!/guide/dev_configuration
在上面的範例中, 我們僅使用 textarea 的 id 屬性來建立 CKEDITOR 物件, 但根據 API 文件, 其實用 name 也是可以的, 或者兩個都用亦可, 不過建議僅使用 id 就可以, 參見下面文件中關於 replace() 的敘述 :
# http://docs.ckeditor.com/#!/api/CKEDITOR-method-replace
由此文件可知, replace() 方法會以一個 CKEditor 物件來取代 DOM 中的 textarea 或 dir 元素, 除了傳入 textarea 的 id 或 name 外, 還可傳入一個 config 物件實體來初始化 CKEditor 物件的設定值, 也就是將預設的設定值覆蓋掉 :
replace(element, [config])
關於 config 物件實體之屬性可參考 :
# http://docs.ckeditor.com/#!/api/CKEDITOR.config
在上面的範例中, 編輯器預設會偵測作業系統語言, 顯示中文介面, 而且會撐到 100% 父容器寬度, 我們可以用 config 指定語為英文, 寬度為 800px 如下 :
CKEDITOR.replace('editor1', {width:800,language:'en'} );
寬度也可以用百分比, 但必須用引號括起來, 例如 :
CKEDITOR.replace('editor1', {width:'50%',language:'en'} );
如果不想讓使用者直接編輯 html 原始碼, 可以用 removePlugins 屬性來取消 "原始碼" 按鈕 :
CKEDITOR.replace('editor1', {removePlugins:'sourcearea'});
參考 :
# how to disable source button in ckeditor 4
如果對工具列的排列方式不滿意, 可以利用 toolbarGroups 屬性來設定, 它將同類型的工具按鈕合為一群, 範例如下 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 測試</title>
<script src="ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor2">
Hello World! 這是 CKeditor!
</textarea>
</form>
<script>
var tg=[{name:'clipboard',groups:['clipboard','undo']},
{name:'editing',groups:['find','selection','spellchecker']},
{name:'links'},
{name:'insert'},
{name:'forms'},
{name:'tools'},
{name:'document',groups:['mode','document','doctools']},
{name:'others'},
'/',
{name:'basicstyles',groups:['basicstyles','cleanup']},
{name:'paragraph',groups:['list','indent','blocks','align','bidi']},
{name:'styles'},
{name:'colors'},
{name:'about'}];
CKEDITOR.replace('editor1', {toolbarGroups:tg,removePlugins:'sourcearea'});
</script>
</body>
</html>
這裡跳行要用斜線 "/", 排列效果如下 :
也可以用 toolbars 屬性直接設定工具列要放哪些按鈕, 範例如下 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 測試</title>
<script src="ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor2">
Hello World! 這是 CKeditor!
</textarea>
</form>
<script>
var toolbar=[['Cut','Copy','Paste','PasteText','PasteFromWord',
'Undo','Redo'],
['Scayt','SpellChecker'],
['Link','Unlink','Anchor'],
['Image','Table','HorizontalRule','Smiley',
'SpecialChar','PageBreak'],
['Maximize'],
'/',
['Bold','Italic',
'Underline','Strike','Subscript',
'Superscript','-','RemoveFormat'],
['NumberedList','BulletedList','-','Outdent','Indent',
'-','Blockquote'],
['Styles','Format'],
['About']];
CKEDITOR.replace('editor1',{toolbar:toolbar});
</script>
</body>
</html>
如果把 toolbar 屬性設為 null, 就會顯示此 package (basic/standard/full) 的全部工具列 :
CKEDITOR.replace('editor1',{toolbar:null});
此外還有一點要注意, 有些在完整版才有的工具列按鈕 (例如文字的前景與背景色 TextColor 與 BgColor) 在標準版設了也不會出現, 因此如果需要自訂工具列的話, 最好下載 Full 版來改裝.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 測試</title>
<script src="http://cdn.ckeditor.com/4.5.5/full/ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor2">
Hello World! 這是 CKeditor!
</textarea>
</form>
<script>
var toolbar=[['Cut','Copy','Paste','PasteText','PasteFromWord',
'Undo','Redo'],
['Scayt','SpellChecker'],
['Link','Unlink','Anchor'],
['Image','Table','HorizontalRule','Smiley',
'SpecialChar','PageBreak'],
['Maximize'],
['About'],
'/',
['Bold','Italic',
'Underline','Strike','Subscript',
'Superscript','-','RemoveFormat'],
['NumberedList','BulletedList','-','Outdent','Indent',
'-','Blockquote'],
['Styles','Format'],
['TextColor','BGColor']];
CKEDITOR.replace('editor1',{toolbar:toolbar});
</script>
</body>
</html>
如果不想在每一個要用到 CKEDITOR 的網頁中進行設定, 其實可以在 CKEDITOR 資料夾中找到一個 config.js, 只要在這裡做設定, 所有專案中用到 CKEDITOR 的網頁都會套用相同設定, 範例如下 :
CKEDITOR.editorConfig=function(config) {
// Define changes to default configuration here. For example:
//config.language = 'en';
//config.uiColor = '#AADC6E';
config.toolbar = [['Cut','Copy','Paste','PasteText','PasteFromWord',
'Undo','Redo'],
['Scayt','SpellChecker'],
['Link','Unlink','Anchor'],
['Image','Table','HorizontalRule','Smiley',
'SpecialChar','PageBreak'],
['Maximize'],
'/',
['Bold','Italic',
'Underline','Strike','Subscript',
'Superscript','-','RemoveFormat'],
['NumberedList','BulletedList','-','Outdent','Indent',
'-','Blockquote'],
['Styles','Format'],
['TextColor','BGColor'],
['About']];
};
CKEDITOR 很棒的地方是提供客製化套件, 在下載頁面點選 "Let me customerize CKEditor", 再按下載鈕 :
然後點選 basic/stadard/full, 於下方將需要的工具按鈕移到右方再下載, 這樣它會將設定都寫在 config,js 中. 不過工具列 plugin 實在玲瑯滿目, 要從中挑選也是個問題.
參考 :
# 讓 CKEditor 更好用
# CKeditor編輯器選項配置
2015-12-12 補充 :
前天完成工作日誌改版後, 發覺編輯時按 enter 跳行似乎間距過大, 我之前已知悉 CKEditor 是用段落標籤 p 來處理跳行, 而非用 br, 昨日在下列網站找到解決辦法 :
# CKEditor 編輯器 換行 空格 解決 辦法
就是在 config.js 中加入下列兩行 :
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;
2016-03-01 補充 :
今天因為同事反映 TinyMCE 編輯器貼上頗長的信件內容時一直 Waiting, 三十分鐘後出現沒有回應訊息問題, 就去網搜是否有此問題的解決辦法, 結果找到一篇很棒的文章, 但與 TinyMCE 問題無關, 反而是我想取代掉的 CKEditor :
# 神調校讓 CKEditor 更好用
2015-12-12 補充 :
前天完成工作日誌改版後, 發覺編輯時按 enter 跳行似乎間距過大, 我之前已知悉 CKEditor 是用段落標籤 p 來處理跳行, 而非用 br, 昨日在下列網站找到解決辦法 :
# CKEditor 編輯器 換行 空格 解決 辦法
就是在 config.js 中加入下列兩行 :
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;
2016-03-01 補充 :
今天因為同事反映 TinyMCE 編輯器貼上頗長的信件內容時一直 Waiting, 三十分鐘後出現沒有回應訊息問題, 就去網搜是否有此問題的解決辦法, 結果找到一篇很棒的文章, 但與 TinyMCE 問題無關, 反而是我想取代掉的 CKEditor :
# 神調校讓 CKEditor 更好用
2015年12月3日 星期四
Win 8.1 安裝 IIS 伺服器
今天收到資安單位來函要求將 IE 升版到 IE11, 以避免安全漏洞. 這給我出了個難題, 因為我的新版工作日誌系統還沒弄好, 而目前使用的舊系統只能在 IE9 以下跑, 升到 IE10 就會有問題 (編輯器 & 檔案上傳). 為今之計只有將舊系統改版應急才是上策. 舊系統使用 IIS+ASP+ACCESS 設計, 而我的電腦已經沒有一台有 IIS 伺服器, 只好上網搜尋安裝 IIS 的方法, 參考 :
# 如何在 Windows 8 安裝 IIS 8 ？
# 在 IIS 上建置傳統 ASP 網站
我的筆電是 WIN8.1, 所以就按圖索驥試試看, 安裝紀錄如下 :
首先按 Windows+Q 鍵, 在搜尋框內輸入 feature :
勾選 Internet Information Service 以及 Web 管理工具下的項目如下 :
同時也選應用程式項下的 ASP 與 ISAPI 擴充程式 :
按確定就開始搜尋必要的檔案, 完成後就可以到 "控制台/系統管理工具", 點選 "Internet Information Services (IIS) 管理員", 點選左方 "連結" 面板中的 "站台", 可看到其預設網站繫結 :
由於我的筆電早已安裝 Apache+PHP+mySQL, HTTP 80 埠已經被 Apache 伺服器用了, 為了避免衝突, 必須將 IIS 的改為其他埠號, 例如 81. 在預設站台列上按滑鼠右鍵, 點選 "繫結" :
按編輯, 將 PORT 改為 81, 主機名稱設為 localhost :
然後點選 Default Web Site, 按滑鼠右鍵, 點選 "管理網站/啟動" 來啟動網站 :
這樣就完成 localhost 網站設定了, 打開瀏覽器連線 localhost:81 即可 :
這是 ASP 的預設站台, 如果要建立自己的網站, 先點選 "站台", 按滑鼠右鍵, 點選 "新增網站" :
在彈出選單中設定網站屬性 :
此處我將網站檔案放在 E:\myasp 下, 而且網站取名 myasp, 所以實體路徑只要填 E:\ 即可 (不要填 E:\myasp, 這樣 IIS 會以為是 E:\myasp\myasp), 我以為這樣就 OK 了, 就啟動 myasp 站台, 然後用瀏覽器連線 localhost:81/myasp 卻得到如下錯誤訊息 :
An error occurred on the server when processing the URL. Please contact the system administrator.
If you are the system administrator please click here to find out more about this error.
我在 "在IIS7中顯示ASP偵錯訊息" 這篇找到解法, 原來 IIS8 預設是關閉 ASP 的偵錯訊息的, 先點選 myasp 站台, 再點 ASP 按鈕 :
在選單的 "編譯/偵錯內容" 的 "將錯誤傳送到瀏覽器" 從 False 改為 True (同時也將伺服端與用戶端偵錯打開), 然後按右上角 "動作/套用" 即可 :
這時將 localhost:81/myasp 重新整理就會顯示錯誤訊息了 :
ADODB.Connection 錯誤 '800a0e7a'
找不到提供者。它可能未被正確安裝。
/myasp/sys_bin\access_adodb_connection_sys.asp, 行10
看起來是跟資料庫連線有關, 因為我的 myasp 架站系統採用 ACCESS 資料庫, 需使用 Microsoft.Jet.OLEDB.4.0 這個 32 位元程式來建立連線, 而 IIS 預設不執行 32 位元程式, 參考 :
# ADODB.Connection 錯誤 '800a0e7a'
點選站台按滑鼠右鍵, 再點進階設定 :
將 "一般/啟用 32 位元應用程式" 改為 True 即可 :
如此這般, 再重新整理 localhost:81/myasp 就能看到 myasp 網站的畫面了 :
這個 12 年前開發的老骨董是我模仿當時很紅的 myPHPnuke 架站機用 JScript 寫的 ASP 版本, 我只是把 myPHPnuke 架好, 然後將主要的功能大略玩一遍, 了解其運作模式後就開工了, 也沒有去研究它是怎麼寫的 (還沒學 PHP, 看不懂). 那時最主要的目的是為了寫碩士論文, 因為蒐集了一堆文獻, 研讀之後需要做筆記, 為了在寫文獻回顧時搜尋方便, 就花了一個多月寫了這個 ASP 架站機, 畢業後就拿到公司用, 沒想到一用就超過十年了.
ASP 已經是很舊的技術了, 但因我對 .NET 一直無法認同, 所以也不想進階到 ASP.NET. 就算是 ASP 我也是用 Javascript 寫, 絕不用 VBScript.
其他參考 :
# http://demos.telerik.com/kendo-ui/editor/index (HTML 編輯器)
# 網站無法執行 - 程序無法存取檔案
2015-12-04 補充 :
今天又發現一個 IIS 設定的問題, 因為 sys_bin 下的 include_programs_iis.asp 這個程式在含括應用程式檔案時會用到上層目錄 :
case 'jlog' : {
%> <!-- #include file="..\bin\jlog.asp" --><%
break;}
所以進入應用程式時會出現下列錯誤 :
Active Server Pages 錯誤 'ASP 0131'
不允許的上層路徑
/myasp/sys_bin\include_programs_iis.asp, 行63
包含檔案 '..\bin\jlog.asp' 不能包含 '..' 來指出上層目錄。
這要在 ASP 中開啟上層目錄 :
注意, 在 "編譯/指令碼語言" 欄位我已將預設的 VBScript 改成 JScript, 因為我的 ASP 專案全部都是用 Javascript 寫的.
2015-12-08 (二) 補充 :
今天測試工作日誌的上傳功能時發現, IIS 8 跟以前 XP 時代的 IIS 6 不同之處是其 ASP 指令碼解譯欄位似乎只能在預設的 VBScript 與 JScript 中選一個填, 以前可以填兩個, 但現在不管填 JScript;VBScript 或 JScript, VBScript 都無法執行. 我的工作日誌全部用 JScript 寫, 唯獨檔案上傳處理程式使用了 VBScript, 這是從所買的 ASP 書裡面抄來的. 最後在下面這篇找到解法 :
# Call a function written on VB from a JScript code (classic ASP)
原來只要在上傳處理程式 fupaction.asp 開頭加上下面這行即可 :
<%@ Language="VBScript" %>
此指令是強制伺服器改用 VBScript 解譯器來執行程式中的命令.
# 如何在 Windows 8 安裝 IIS 8 ？
# 在 IIS 上建置傳統 ASP 網站
我的筆電是 WIN8.1, 所以就按圖索驥試試看, 安裝紀錄如下 :
首先按 Windows+Q 鍵, 在搜尋框內輸入 feature :
點選 "開啟或關閉 Windows 功能" :
同時也選應用程式項下的 ASP 與 ISAPI 擴充程式 :
按確定就開始搜尋必要的檔案, 完成後就可以到 "控制台/系統管理工具", 點選 "Internet Information Services (IIS) 管理員", 點選左方 "連結" 面板中的 "站台", 可看到其預設網站繫結 :
由於我的筆電早已安裝 Apache+PHP+mySQL, HTTP 80 埠已經被 Apache 伺服器用了, 為了避免衝突, 必須將 IIS 的改為其他埠號, 例如 81. 在預設站台列上按滑鼠右鍵, 點選 "繫結" :
按編輯, 將 PORT 改為 81, 主機名稱設為 localhost :
然後點選 Default Web Site, 按滑鼠右鍵, 點選 "管理網站/啟動" 來啟動網站 :
這樣就完成 localhost 網站設定了, 打開瀏覽器連線 localhost:81 即可 :
這是 ASP 的預設站台, 如果要建立自己的網站, 先點選 "站台", 按滑鼠右鍵, 點選 "新增網站" :
在彈出選單中設定網站屬性 :
此處我將網站檔案放在 E:\myasp 下, 而且網站取名 myasp, 所以實體路徑只要填 E:\ 即可 (不要填 E:\myasp, 這樣 IIS 會以為是 E:\myasp\myasp), 我以為這樣就 OK 了, 就啟動 myasp 站台, 然後用瀏覽器連線 localhost:81/myasp 卻得到如下錯誤訊息 :
An error occurred on the server when processing the URL. Please contact the system administrator.
If you are the system administrator please click here to find out more about this error.
我在 "在IIS7中顯示ASP偵錯訊息" 這篇找到解法, 原來 IIS8 預設是關閉 ASP 的偵錯訊息的, 先點選 myasp 站台, 再點 ASP 按鈕 :
在選單的 "編譯/偵錯內容" 的 "將錯誤傳送到瀏覽器" 從 False 改為 True (同時也將伺服端與用戶端偵錯打開), 然後按右上角 "動作/套用" 即可 :
ADODB.Connection 錯誤 '800a0e7a'
找不到提供者。它可能未被正確安裝。
/myasp/sys_bin\access_adodb_connection_sys.asp, 行10
看起來是跟資料庫連線有關, 因為我的 myasp 架站系統採用 ACCESS 資料庫, 需使用 Microsoft.Jet.OLEDB.4.0 這個 32 位元程式來建立連線, 而 IIS 預設不執行 32 位元程式, 參考 :
# ADODB.Connection 錯誤 '800a0e7a'
點選站台按滑鼠右鍵, 再點進階設定 :
將 "一般/啟用 32 位元應用程式" 改為 True 即可 :
如此這般, 再重新整理 localhost:81/myasp 就能看到 myasp 網站的畫面了 :
這個 12 年前開發的老骨董是我模仿當時很紅的 myPHPnuke 架站機用 JScript 寫的 ASP 版本, 我只是把 myPHPnuke 架好, 然後將主要的功能大略玩一遍, 了解其運作模式後就開工了, 也沒有去研究它是怎麼寫的 (還沒學 PHP, 看不懂). 那時最主要的目的是為了寫碩士論文, 因為蒐集了一堆文獻, 研讀之後需要做筆記, 為了在寫文獻回顧時搜尋方便, 就花了一個多月寫了這個 ASP 架站機, 畢業後就拿到公司用, 沒想到一用就超過十年了.
ASP 已經是很舊的技術了, 但因我對 .NET 一直無法認同, 所以也不想進階到 ASP.NET. 就算是 ASP 我也是用 Javascript 寫, 絕不用 VBScript.
其他參考 :
# http://demos.telerik.com/kendo-ui/editor/index (HTML 編輯器)
# 網站無法執行 - 程序無法存取檔案
2015-12-04 補充 :
今天又發現一個 IIS 設定的問題, 因為 sys_bin 下的 include_programs_iis.asp 這個程式在含括應用程式檔案時會用到上層目錄 :
case 'jlog' : {
%> <!-- #include file="..\bin\jlog.asp" --><%
break;}
所以進入應用程式時會出現下列錯誤 :
Active Server Pages 錯誤 'ASP 0131'
不允許的上層路徑
/myasp/sys_bin\include_programs_iis.asp, 行63
包含檔案 '..\bin\jlog.asp' 不能包含 '..' 來指出上層目錄。
這要在 ASP 中開啟上層目錄 :
注意, 在 "編譯/指令碼語言" 欄位我已將預設的 VBScript 改成 JScript, 因為我的 ASP 專案全部都是用 Javascript 寫的.
2015-12-08 (二) 補充 :
今天測試工作日誌的上傳功能時發現, IIS 8 跟以前 XP 時代的 IIS 6 不同之處是其 ASP 指令碼解譯欄位似乎只能在預設的 VBScript 與 JScript 中選一個填, 以前可以填兩個, 但現在不管填 JScript;VBScript 或 JScript, VBScript 都無法執行. 我的工作日誌全部用 JScript 寫, 唯獨檔案上傳處理程式使用了 VBScript, 這是從所買的 ASP 書裡面抄來的. 最後在下面這篇找到解法 :
# Call a function written on VB from a JScript code (classic ASP)
原來只要在上傳處理程式 fupaction.asp 開頭加上下面這行即可 :
<%@ Language="VBScript" %>
此指令是強制伺服器改用 VBScript 解譯器來執行程式中的命令.
2014年5月1日 星期四
關於 XSS 攻擊
最近同事貼工作日誌時, 被資安發現是 XSS 攻擊而要求檢討. 事實上只是將公文上的 EMAIL 內容貼上去以利追蹤而已, 可能 mail 中含有 HTML 程式碼的緣故. 所以要研究一下防治之道.
何謂 XSS? 搜尋了一些資料如下 :
何謂 XSS? 搜尋了一些資料如下 :
- 防範Cross-Site-Scripting(XSS)
- [ASP.NET]基礎防範XSS攻擊函式
- 網站防範XSS攻擊的關鍵思考
- 【ASP.NET】跨網站攻擊防範Xss
- XSS (Cross-site scripting) 跨網站指令碼攻擊
- XSS (Cross Site Scripting) Prevention Cheat Sheet
2013年7月3日 星期三
在 ASP 中使用 ADODB.Stream 上傳檔案問題
最近解決了 ASP 檔案上傳問題, 我想應該記一下, 免得忘了. 幾個月前同事反映, 我的工作日誌系統無法上傳檔案了, 因為剛好部分電腦升級到 IE8, 粗略測試發現用 IE8 上傳失敗, 所以誤以為是 IE8 的問題. 但我還在忙新專案, 沒空研究, 一直拖到上周, 新專案也要用到檔案上傳, 發現 IE6 也不行, 我想該不會是 IIS 伺服器本身吧? 加上最近新增應用程式時失敗, 我就懷疑 FSO 是否被關閉, 所以箭頭就指向伺服器, 由於我使用 ADODB.Stream 物件上傳檔案, 於是上網找了一下資料如下 :
我就聯想到, 該不會是上回 MIS 把伺服器從 Window 2000 Server 升級, 沒把 FSO 與 ADODB.Stream 打開吧? (這要手動啟動服務), 於是趕緊請 MIS 照說明啟動,
- 首先打開 DOS 視窗, 切到 C:\Windows\system32 底下, 執行 :
regsvr32.exe scrrun.dll - 切換到 C:\Program Files\Common Files\System\ado 下, 執行 :
regsvr32.exe msado15.dll
執行這兩個指令後, 都出現 "服務啟動成功", 表示之前這兩個服務都是關閉的. 啟動後檔案上傳服務就恢復正常了.
2013年6月15日 星期六
張智星老師的實驗室工作進度管理系統
前陣子想起以前在張智星老師的網站上看過其進度管理系統, 看來是用來給研究生每週填進度, 管理各項研究用的, 我覺得很實用, 但是忘了網址, 到實驗室首頁又找不到 ENTRY, 今天搜尋 "張智星 實驗室 進度"一下子就找到了, 在這裡 :
http://neural.cs.nthu.edu.tw/jang/mir/weeklyReport/default.asp
這是用 ASP 寫的, 簡單實用, 還大方把整個系統讓人下載.
以前買過張老師寫的書 "JavaScript 程式設計與應用", 是我看過 Javascript 中文書裡寫得最實用的, 據推薦序說在清大是橫跨各科系非常熱門的課, 而在公司抓系統資料使用的最多的 WSH 也是從這本書學來的.
http://neural.cs.nthu.edu.tw/jang/mir/weeklyReport/default.asp
這是用 ASP 寫的, 簡單實用, 還大方把整個系統讓人下載.
以前買過張老師寫的書 "JavaScript 程式設計與應用", 是我看過 Javascript 中文書裡寫得最實用的, 據推薦序說在清大是橫跨各科系非常熱門的課, 而在公司抓系統資料使用的最多的 WSH 也是從這本書學來的.
2013年1月23日 星期三
讀取 ACCESS 資料表欄位名稱
在 ASP+Javascript+ACCESS 的小型互動網頁環境中, 常常需要讀取某資料表的欄位名稱 (例如要作為表格的標頭), 總不能打開資料庫一一去抄出來吧! 以下程式碼利用掃描資料庫的 Schema 欄位, 就可以將全部欄位名稱讀出來, 放到陣列裡面.
var conn=Server.CreateObject("ADODB.Connection"); //建立 ADODB 物件
var str="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" +
Server.MapPath("./db/MyDB.mdb"; //連線字串
conn.Open(str); //開啟資料庫連線
var schema=conn.OpenSchema(4); //取得 Schema 物件
var fieldnames=new Array(); //存放欄位名稱
while (!schema.EOF) {
if (schema.Fields("TABLE_NAME").Value=="users") { //比對資料表名稱
fieldnames.push(schema.Fields("Column_Name").Value); //放入陣列
}
schema.MoveNext();
}
schema=null;
Response.Write(fieldnames.join()); //顯示欄位名稱
conn.Close(); //關閉連線
conn=null;
2010年10月24日 星期日
免費 ASP 主機
今日找到一個免費的 ASP HOSTING : http://somee.com 速度超快, 雖然上頭有廣告, 還不錯啦!
我打算用 jQuery+ASP 在上面設計 :
1. 英語測試網 (科見)
2. 英語成語網
3. 英語諺語網
4. 國語造句網
我打算用 jQuery+ASP 在上面設計 :
1. 英語測試網 (科見)
2. 英語成語網
3. 英語諺語網
4. 國語造句網
2009年2月27日 星期五
啟動 Vista 的 IIS
VISTA 安裝時已經含有 IIS (公司的 Business 版, 不知 HOME 有沒有), 只是尚未啟動. 要啟動 IIS, 先到 [控制台], 切到 [傳統檢視], 點選 [程式和功能], 找到 [開啟或關閉 Windows 功能], 會列出一張已安裝之程式表, 看看有沒有 [Internet Information Services], 若有表示已安裝, 否則就要找 Vista 光碟新增了. 若 [Internet Information Services] 前面的核取盒是填滿的, 表示 IIS 功能已啟動, 若是空白則請點一下, 會問你是否要啟動 IIS 功能, 確定後要等一會兒才會完成. 完成後在 C:\ 下會出現 Inetpub 目錄, 底下的 wwwroot 就是將來放網頁應用程式的地方. 另外在 [控制台/系統管理工具] 中, 也會出現 [IIS 管理工具], 點進去就可以管理 IIS 伺服器 (例如改變預設目錄, 管理虛擬目錄, 啟動或暫停伺服器等).
* 另查 VISTA 各版本之 IIS 安裝狀態
HOME BASIC : 無 IIS (有辦法灌嗎? 像 XP HOME 一樣)
HOME PREMIUM : 內建 IIS (僅 WEB 執行功能, 無 FTP, WEB 驗證授權等)
BUSINESS : 內建 IIS
* 另查 VISTA 各版本之 IIS 安裝狀態
HOME BASIC : 無 IIS (有辦法灌嗎? 像 XP HOME 一樣)
HOME PREMIUM : 內建 IIS (僅 WEB 執行功能, 無 FTP, WEB 驗證授權等)
BUSINESS : 內建 IIS
2008年10月24日 星期五
ASP 網頁郵件程式
以前寫的 ASP 應用程式用 CDONT/CDO 最近無法使用, 不知原因, 所以 ...
>> 在WINDOWS 2003下CDONTS組件的下載及安裝方法
>> JMAIL 的函數呼叫用法
註冊 cdont.dll 方法 :
1. 把 cdont.dll 放在 c:\windows\system32\ 下
2. 執行 "開始/執行" , 輸入 regsvr32 c:\windows\system32\cdonts.dll
3. 將mailroot 的安全性設成 everybody 完全控制或新增IUSER的權限
執行 aspcheck.asp 檢查 cdonts 是否已安裝
■常見的收發郵件組件
>> 在WINDOWS 2003下CDONTS組件的下載及安裝方法
>> JMAIL 的函數呼叫用法
註冊 cdont.dll 方法 :
1. 把 cdont.dll 放在 c:\windows\system32\ 下
2. 執行 "開始/執行" , 輸入 regsvr32 c:\windows\system32\cdonts.dll
3. 將mailroot 的安全性設成 everybody 完全控制或新增IUSER的權限
執行 aspcheck.asp 檢查 cdonts 是否已安裝
■常見的收發郵件組件
| 組件名稱 | 支持及版本 |
| Jmail.Message (Dimac JMail 郵件收發) | N/A |
| CDONTS.NewMail (虛擬 SMTP 發信) | ﹟ 1.2 (表示已安裝) |
2008年7月23日 星期三
應用程式助理告一段落
這幾天快馬加鞭, 終於把資料庫操作部分寫完了, 主要設計更動是把分頁與搜尋功能整合, 分頁使用ADO物件,同時也加入列表換列換色功能. 接下來要寫進階搜尋功能與進階欄位驗證. 資料庫部份算是大功告成, 需要改進處只有編輯與新增功能是否要整合而已. 原以為很快就清潔溜溜的事情, 沒想到竟花了一個多月(6/10~7/23)!
等檔案操作弄完, 工具製作部分就要結束, 回到STK與管理新猷專案上, 再依據使用狀況來微調工具.
等檔案操作弄完, 工具製作部分就要結束, 回到STK與管理新猷專案上, 再依據使用狀況來微調工具.
訂閱：
文章
(
Atom
)