首先说明一下看,kindeditor是一个好用的编辑器。在使用的时候我们有时会遇到这样的问题:
使用kindeditor编辑器编辑后提交到数据库中的内容再次读取出来显示的不正确了,这里做一下简单探讨。
在使用Kindeditor的时候我们往往用js调用来创建,如:
<script type="text/javascript"> KindEditor.ready(function(K) { K.create('#content', { themeType : 'default', allowFileManager : true, uploadJson : 'jsonuploadfiles.jsp', fileManagerJson : 'jsonfilemanagerfiles.jsp' }); }); </script>然后创建一个隐藏的文本域textarea来保存数据,如
<textarea id="content" name="content" style="width:100%;height:400px;visibility:hidden;"></textarea>
这个操作在提交到数据库的过程中没有什么问题(当然要处理好sql语句的问题,最好用数组参数插入,一方面防止注入特殊字符,另一方面也可以防止某些字符插入时导致执行失败的问题,这个问题我们会在另一篇中讨论),但是当从数据库中读出的时候就会出现问题了,比如以下内容为读取数据库内容时的赋值代码:(其中<%= content %>为从数据库中直接读取出来的内容)
<textarea id="content" name="content" style="width:100%;height:400px;visibility:hidden;"><%= content %></textarea>
这种情况下,如果遇到html或其他特殊标记的内容就会导致这个textarea赋值失败,比如如下内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery渐变/淡入淡出焦点幻灯图代码</title> <script type="text/javascript" src="js/jquery.1.4.2-min.js"></script> …… </body> </html>
这个时候kindeditor就不能正确显示可视化编辑的界面了,点击查看源代码也看不到正确的源代码了,这样的内容如果编辑之后再次提交,势必造成内容不正确。这个时候我们考虑两个解决方法:
一、这个原因是因为从数据库中读取的数据与网页中原有的html源代码中的字符混淆到一起导致textarea不能正确显示因而再导致kindeditor不能正确读取和显示产生的,那么我们可以考虑让这段从数据库中读取的数据不要直接混淆在html代码中从而解决问题。
也就是说让这段数据只在内存中存在而不直接穿插和显示在html网页代码中。那么这个问题该怎么解决呢?我们就想到一个方法,那就是ajax,我们可以等这个页面加载后再用ajax发起一个异步请求从数据库中读取数据,然后赋值给textarea文本域,然后再加载kindeditor来同步显示读取出来的内容,这样的话就不用在html源代码中显示对应的含有特殊字符的数据了,从而避免掉这个问题:
var htmlobj=$.ajax({url:"Ajax.action?id="+<%=articleID%>,async:false});//从数据库中读取指定内容 $("#content").val(htmlobj.responseText);//将读取内容赋值给textarea文本域 $.getScript('kindeditor40/kindeditor-min.js', function() {//动态创建kindeditor并同步textarea文本域中的内容 KindEditor.basePath = 'kindeditor40/'; KindEditor.create('textarea[name="content"]', { themeType : 'default', allowFileManager : true, uploadJson : 'jsonupload.jsp', fileManagerJson : 'jsonfilemanager.jsp' }); });
二、可以用htmlencode()的方法来解决,
在内容被显示之前先进行htmlencode()编码,这里以java为例,可以调用commons-lang.jar这个包中的
org.apache.commons.lang.StringEscapeUtils方法进行编码
那么上面的内容就变成了
<textarea id="content" name="content" style="width:100%;height:400px;visibility:hidden;"><%= StringEscapeUtils.escapeHtml( content )%></textarea>
然后kindeditor又支持这样编码后的解析,但是在html源代码中这些数据又不会混乱,这个时候问题就解决了。
另:asp中有Server.Htmlencode()方法。