由於之前開發PHP很多OPEN SOURCE都有提供且很多熱心的神人都會在網路上PO文這篇文章純粹是紀錄因為工作上需要使用.NET 來做HTMLEditor
由於採用.dll舊的作法 FF和CH會不正常 所以花了一個早上整理這篇文章做個紀錄:
CKeditor in ASP.NET
1. 至官方下載 http://ckeditor.com/download
2. 解開壓鎖檔後刪除不必要的檔案 _samples _source 目錄以減少檔案容量。
3. 複製該目錄至您的.NET專案底下
4. 在<head></head>中間引入Ckeditor 的JS 核心 ：
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
在HEAD中如下:
<head runat="server">
<title>HTML Editor</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
5. 在Form中間插入Textbox物件 或切換到原始碼頁面插入 注意: ID可以自行設定
<asp:TextBox ID="tbContent" name="tbContent" runat="server" TextMode="MultiLine"></asp:TextBox>
6. 接著在上面那段程式碼下方插入下面這段JS
<script type="text/javascript">
//CKEDITOR.replace('tbContent');
CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$") %>');
</script>
重點程式註解 :
CKEDITOR.replace('<%=[物件ID].ClientID.Replace("_","$") %>',{toolbar:'[ 工具列的屬性 可設定 Basic 或 Full ]});
7. 大部分的文章到此為止算是把CKeditor 搬到自己的網頁上了 但是後續還需要把 輸入的資料 取出
將Page 指示詞修改為 :
<%@ Page Language="C#" ValidateRequest="false" %>
8. 使用ToolBar上面提供的Save按鈕
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack) {
Label1.Text += HttpUtility.HtmlEncode(Request.Form["tbContent"].ToString());
}
}
9. 到此已經可以取得需要的值了 應可以帶入資料庫等。
整個頁面的程式碼 :
<%@ Page Language="C#" ValidateRequest="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack) {
Label1.Text += HttpUtility.HtmlEncode(Request.Form["tbContent"].ToString());
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>HTML Editor</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form id="form1" runat="server" >
<div>
<asp:TextBox ID="tbContent" name="tbContent" runat="server" TextMode="MultiLine"></asp:TextBox>
<br />
<asp:Label ID="Label1" runat="server">Save to Try Get Value</asp:Label></div>
<script type="text/javascript">
//CKEDITOR.replace('tbContent');
CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$") %>',{toolbar:'Andybar'});
</script>
</form>
</body>
</html>
10. 如果想修改ToolBar的按鈕請到Ckeditor目錄中找到 config.js 開啟後 加入藍色段落
由於Basic 太過陽春 故藍色段落為筆者自行針對比較常用的功能設計的Toolbar 下面為開啟後看到的程式碼 :
/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.toolbar_Andybar =
[
['Source'],
['Save','Undo','Redo','Find','Replace','SelectAll'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Image','Table','HorizontalRule','SpecialChar'],
'/',
['Styles','Format','PasteFromWord'],
['Bold','Italic','Strike','TextColor','BGColor'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['Link','Unlink','Anchor']
];
};
下面是 按鈕的對照表 :
Source：原始碼
Save：儲存
NewPage：開新檔案
Preview：預覽
Templates：樣版
Cut：剪下
Copy：複製
Paste：貼上
PasteText：貼為文字格式
PasteFromWord：自 word 貼上
Print：列印
SpellChecker：拼字檢查
Scayt：即時拼寫檢查
Undo：復原(上一步)
Redo：重複(下一步)
Find：尋找
Replace：取代
SelectAll：全選
RemoveFormat：清除格式
Form：表單
Checkbox：核取方塊
Radio：選項按鈕
TextField：文字方塊
Textarea：文字區域
Select：選單
Button：按鈕
ImageButton：影像按鈕
HiddenField：隱藏欄位
Bold：粗體
Italic：斜體
Underline：底線
Strike：刪除線
Subscript：下標
Superscript：上標
NumberedList：編號清單
BulletedList：項目清單
Outdent：減少縮排
Indent：增加縮排
Blockquote：引用文字
JustifyLeft：靠左對齊
JustifyCenter：置中
JustifyRight：靠右對齊
JustifyBlock：左右對齊
Link：插入/編輯超連結
Unlink：移除超連結
Anchor：插入/編輯錨點
Image：插入影像
Flash：插入Flash
Table：插入表格
HorizontalRule：插入水平線
Smiley：插入表情
SpecialChar：插入特殊符號
PageBreak：插入分頁符號
Styles：樣式
Format：格式
Font：字體
FontSize：大小
TextColor：文字顏色
BGColor：背景顏色
Maximize：最大化
ShowBlocks：顯示區塊
About：關於CKEditor
11. 其他設定
CKEditor 的樣版修改
CKEditor 目前提供了3個樣版,Kama、Office 2003以及V2等3種樣版：
1. CKEditor 套用Kama樣版
重點在修改藍色程式碼部分
<textarea id=’editor_kama’ name=’editor_kama’>
</textarea>
<script type=’text/javascript’>
CKEDITOR.replace( ‘editor_kama’,{skin:'kama'});
</script>
其他樣版則將 kama 的值替換 office2003 v2
2.CKEditor 的樣版底色修改
CKEditor提供了一個很簡便的方式就可以修改樣版的底色，可以依據網站的樣式自行修改CKEditor的底色來符合網站的風格，修改的方式只需要給定幾個參數即可：
<textarea id=’editor_ui_color’ name=’editor_ui_color’>
</textarea>
<script type=’text/javascript’>
CKEDITOR.replace( 'editor_ui_color',{
extraPlugins : 'uicolor', //底色>
uiColor: '#14B8C4' //指定的底色
});
</script>
CKEditor 的語系修改
如果您要自行指定CKEditor的語系，只須要指定language即可，詳細的語系您可以參考/ckeditor/lang/_languages.js
<textarea cols='80' id='editor_language' name='editor_language' >
</textarea>
<script type=’text/javascript’>
CKEDITOR.replace( ‘editor_language’,{
language: ‘zh’, //指定為正體語系,如果要簡體語系則設定’zh-cn’
});
</script>
若還需要其他功能請參考下面不錯的文章
http://homeserver.com.tw/%E4%B8%AB%E5%BF%A0%E7%9A%84%E7%94%9F%E6%B4%BB%E7%B6%B2%E8%AA%8C/%E6%89%80%E8%A6%8B%E5%8D%B3%E6%89%80%E5%BE%97html%E7%B7%A8%E8%BC%AF%E5%99%A8-ckeditor2/
http://www.codedigest.com/Articles/ASPNET/315_Using_CKEditor_3x%5Baka_FCKeditor%5D_in_ASPNet.aspx
↑原文的但很詳細
留言列表
Learn_學習紀錄 (5)