富文本编辑器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>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值