富文字編輯器CKEDITOR使用注意事項,Ajax回撥
阿新 • • 發佈:2019-02-01
先簡述下,寫這篇文章的原因,用了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>