zoukankan      html  css  js  c++  java
  • 富文本框保存和显示问题

    此前,在进行项目开发的时候,遇到这样一个问题,当使用富文本框上传图片的时候,对整个表单进行序列化传参到后台的时候,报异常,原来是富文本框的内容需要进行特殊处理,不能直接序列化,查了一些资料,发现可以使用escape()函数和unescape()函数进行富文本框的编码和解码,下面贴出代码:

    前端编辑保存代码:

     1 <form id="itemEdit1" >
     2         <div class="items">
     3             <label id="lblCont">内容:</label>
     4                 <table id="Table7" cellSpacing="0" cellPadding="1" width="300" bgColor="black" border="0">
     5                     <tr>
     6                         <td>
     7                     <table id="Table8" cellSpacing="0" cellPadding="0" width="300" bgColor="white" border="0">
     8                     <tr>
     9                     <td>
    10                   <textarea id="content1"  cols="100" rows="8"></textarea>
    11                   <input type="hidden" id="Content" name="Content" />                                                                                  
    12                 </tr>
    13             </table>
    14                 </td>
    15             </tr>
    16             </table>
    17         </div>
    18 
    19         <div class="items" >
    20             <div style="margin-top: 10px; margin-left: 100px;">
    21                 <a class="bt1" id="btnconf" onclick="message.Save()">确定创建</a>
    22                 <a id="btncancel" class="bt1" onclick="message.Cancel()">取消</a>
    23             </div>
    24         </div>
    25 
    26            
    27 </form>
     1  var editor;
     2             KindEditor.ready(function (K) {
     3                 editor = K.create('#content1', {
     4                     //上传管理
     5                     uploadJson: '/Scripts/kindeditor/asp.net/upload_json.ashx',
     6                     //文件管理
     7                     fileManagerJson: '/Scripts/kindeditor/asp.net/file_manager_json.ashx',
     8                     allowFileManager: true,
     9                     //设置编辑器创建后执行的回调函数
    10                     afterCreate: function () {
    11                         var self = this;
    12                         K.ctrl(document, 13, function () {
    13                             self.sync();
    14                             K('form[name=example]')[0].submit();
    15                         });
    16                         K.ctrl(self.edit.doc, 13, function () {
    17                             self.sync();
    18                             K('form[name=example]')[0].submit();
    19                         });
    20                     },
    21                     //上传文件后执行的回调函数,获取上传图片的路径
    22                     afterUpload: function (url) {
    23                         alert(url);
    24                     },
    25                     afterCreate: function () {
    26                         this.sync();
    27                     },
    28                     afterBlur: function () {
    29                         this.sync();
    30                     },
    31                     //编辑器高度
    32                      '540px',
    33                     //编辑器宽度
    34                     height: '250px;',
    35                     //配置编辑器的工具栏
    36                     items: [
    37                     'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
    38                     'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
    39                     'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
    40                     'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
    41                     'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
    42                     'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
    43                     'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
    44                     'anchor', 'link', 'unlink', '|', 'about'
    45                     ]
    46                 });
    47                 prettyPrint();
    48             });
     1 Save: function () {
     2                  
     3                     $("#Content").val(escape(editor.html()));
     4                     $('#content1').val("");
     5                     editor.html("");
     6                     $.post("/Task/AddTask", {  model: JSON.stringify($("#itemEdit1").formToJson()) }, function (data) {
     7                         var data = JSON.parse(data);
     8                         switch (data.message) {
     9                             case JsonResult.SessionOut:
    10                                 $.messager.alert('系统出错', ' 登录超时,请重新登录!');
    11                                 break;
    12                             case JsonResult.Error:
    13                                 $.messager.alert('系统出错', data.data);
    14                                 break;
    15                             case JsonResult.Success:
    16                                 $.messager.alert('消息', '提交成功');
    17 
    18                                 history.back();
    19                               
    20                                 break;
    21                         }
    22                     });
    23                 },

    后台可以直接获取form传过来的参数保存到数据库中,但是倘若再次显示数据的时候需要对从数据库取出来的数据进行escape解码:

    <form><table><tr><td>unescape(content数据)</td></tr></table></form>

  • 相关阅读:
    编译原理实验(NFA转DFA,LL1文法)
    欧几里得算法
    Codeforces Round #697 (Div. 3) A -D 解题报告
    STM32使用SPI驱动WS2812灯带
    读书笔记---<<人月神话>>5
    基于百度和echars接口,实现多点连接
    读书笔记---<<人月神话>>4
    读书笔记---<<人月神话>>3
    软件杯----------害虫地区分布展示
    web页面采用高德地图JS api和Web api实现路径规划
  • 原文地址:https://www.cnblogs.com/syfblog/p/4935136.html
Copyright © 2011-2022 走看看