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>

  • 相关阅读:
    Java for LeetCode 229 Majority Element II
    Java for LeetCode 228 Summary Ranges
    Java for LeetCode 227 Basic Calculator II
    Java for LintCode 颜色分类
    Java for LintCode 链表插入排序
    Java for LintCode 颠倒整数
    Java for LintCode 验证二叉查找树
    Java for LeetCode 226 Invert Binary Tree
    Java for LeetCode 225 Implement Stack using Queues
    Java for LeetCode 224 Basic Calculator
  • 原文地址:https://www.cnblogs.com/syfblog/p/4935136.html
Copyright © 2011-2022 走看看