
CKEDITOR是一款非常輕便的富文本編輯器,如上圖:參考網上的使用方法,我以.net為例,在aspx頁面使用,
准備工作:首先要下載控件包,將解壓后的整個文件夾添加到項目根目錄。
第一步:引用js, <script charset="utf-8" type="text/javascript" src="../ckeditor/ckeditor.js"></script>
第二步:放置服務器控件,<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor inputstyle4"></asp:TextBox>
第三步:調用控件,
<script type="text/javascript">CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$") %>');</script>
記住:第二步和第三步的代碼要放在一起,要有順序的放置;如圖:

還有一種引用方法
<script type="text/javascript">CKEDITOR.replace('tbContent');</script>方法,此方法引用服務器控件不可用,當然也可以把script代碼寫在head中
<script type="text/javascript">
//window.onload = function()
//{
// CKEDITOR.replace('tbContent');
//};
</script>
完成以上步驟即可查看效果,如果需要配置該控件寬,高,顏色等等,可以打開文件夾內的config.js文件,如圖:

config.width = 660; //設置寬度
config.height = 600; //設置高度
config.uiColor = '#ced9df';//設置背景顏色
如果要調整邊距的話,我的解決方法是在控件外圍放置一個div來控制邊距,如下圖:

如果你想使用jquery提交表單,也可以使用下述方法:
<textarea id="tbContent" class="inputstyle4" ></textarea>
<script type="text/javascript">CKEDITOR.replace('txtContent');</script>
或在head內引用
$(function () {
CKEDITOR.replace('txtContent', { height: '300px', width: '500px' });
});
最終效果圖如下:

使用此方法,唯一的缺點就是,如果將textarea加上runat=server的話,就會識別不出, CKEDITOR會調用不了,textarea加上runat=server的話就成了服務器控件,CKEDITOR是客戶端控件會識別不了,所以調用不了,如果你把控件放在了UpdatePanel(局部刷新)服務器控件內,如果控件內已經輸入值,你只要點擊其他的服務器控件按鈕的話,就會引發異常或者清空了控件內的值,不過我的解決方案是
頁面第一次加載的時候,就判斷該頁面上特有的文本框內的值是否為空,如果不為空,直接為該文本框回填值,如下:
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
if(!string.IsNullOrWhiteSpace(this.txttuwen_title.Value.ToString()))
{
this.txttuwen_title.Value = this.txttuwen_title.Value.ToString();
}
if (!string.IsNullOrWhiteSpace(this.txttuwen_author.Value.ToString()))
{
this.txttuwen_author.Value = this.txttuwen_author.Value.ToString();
}
}
}
至此CKEDITOR富文本控件使用中的問題結束。
提交數據時如果報錯從客戶端(tbContent="<p>ddddddddddddddddd...")中檢測到有潛在危險的 Request.Form 值。
請在該頁面添加 validateRequest="false" 放寬安全驗證
