富文本框保存和显示问题

此前,在进行项目开发的时候,遇到这样一个问题,当使用富文本框上传图片的时候,对整个表单进行序列化传参到后台的时候,报异常,原来是富文本框的内容需要进行特殊处理,不能直接序列化,查了一些资料,发现可以使用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>

原文地址:https://www.cnblogs.com/syfblog/p/4935136.html