富文本編輯器CKEDITOR的使用配置(問題註解)

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" 放寬安全驗證