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