由於之前開發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

↑原文的但很詳細





創作者介紹

ANdyYoU_蹤雁_數位記錄本

andyyu0920 發表在 痞客邦 PIXNET 留言(0) 人氣()