先简述下,写这篇文章的原因,用了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>