1. 程式人生 > >富文字編輯器CKEDITOR使用注意事項,Ajax回撥

富文字編輯器CKEDITOR使用注意事項,Ajax回撥

先簡述下,寫這篇文章的原因,用了ckeditor富文字編輯器,獲取值的時候,總是空值。
先說下,用法:
1、從網上下載ckeditor的相關檔案:
這裡寫圖片描述

2、在介面上呼叫js檔案

 <script src="<%=Request.ApplicationPath %>/MaiGanSys/ckeditor/ckeditor.js" type="text/javascript"></script>

富文字編輯器展示部分:
Content是富文字編輯器顯示區域,當輸入內容後,賦值給Info_Content_202是用於後臺取值。

  <tr>
                                <th
style="width: 10%; text-align: right">
內容: </th> <td style="width: 90%; text-align: left; height: 26px;" colspan="3"> <asp:TextBox ID="Content" runat
="server" TextMode="MultiLine" class="ckeditor">
</asp:TextBox> </td> </tr> <tr> <td colspan="3" style="display:none">
<asp:TextBox ID="Info_Content_202" runat="server" TextMode="MultiLine"></asp:TextBox> </td> </tr>

使用富文字編輯器一定加屬性ValidateRequest=”false” 。因為有html標籤會被攔截。

<%@ Page Language="C#" MasterPageFile="~/WebMaster/OpenWin_FixHead.Master" AutoEventWireup="True" Inherits="MaiGanSys.Page.MGInfoPush.MGInfoPush_Add"
    Title=""  CodeFile="MGInfoPush_Add.aspx.cs" ValidateRequest="false" %>

按鈕事件:

 <div style="display: none">
                    <rongguang:button id="btnAdd" runat="server" text="新增儲存1" cssclass="BtnCss" onclick="btnAdd_Click"></rongguang:button>
                </div>
                <input type="button" class="BtnCss" value="新增儲存" onclick="GetText();" />

指令碼獲取值

 <script type="text/javascript">
        var editor = null;
        $(document).ready(function () {

            InintEdit();
        });
        function InintEdit()
        {
            editor = CKEDITOR.replace('ContentPlaceHolder1_Content');
        }


        function GetText() {

            $("#<%=Info_Content_202.ClientID%>").val(editor.getData());

            $("#<%=btnAdd.ClientID%>").click();
        }
    </script>

注:點選按鈕後觸發回撥,介面重新重新整理,則需要重新呼叫繫結介面的內容

 this.WriteAjaxMessage("RefreshByBtn();layer.alert('資料儲存成功!', {icon: 6});InintEdit();");

注:檢視介面設定富文字編輯器為只讀屬性。

<script type="text/javascript">
      $(document).ready(function () {
          CKEDITOR.replace('ContentPlaceHolder1_Info_Content_202');
          CKEDITOR.on('instanceReady', function (event) {
              editor = event.editor;
              editor.execCommand("toolbarCollapse");
              editor.setReadOnly(true); //只讀
          });
      });
            </script>