富文本编辑器CKEDITOR使用注意事项，Ajax回调

来源：互联网发布：人工智能如何实现编辑：程序博客网时间：2024/06/05 01:09

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

0 0