1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > kindeditor富文本编辑器的使用

kindeditor富文本编辑器的使用

时间:2019-01-05 04:42:07

相关推荐

kindeditor富文本编辑器的使用

第一步引入相应的js文件

<!-- 引入kindeditor --><link rel="stylesheet" href="<%=basePath%>kindeditor-4.1.10/themes/default/default.css" /><link rel="stylesheet" href="<%=basePath%>kindeditor-4.1.10/plugins/code/prettify.css" /><script charset="utf-8" src="<%=basePath%>kindeditor-4.1.10/kindeditor.js"></script><script charset="utf-8" src="<%=basePath%>kindeditor-4.1.10/lang/zh_CN.js"></script><script type="text/javascript" src="<%=basePath%>jslib/noRefleshForm.js"></script>

第二步初始化kindeditor

</script><script type="text/javascript"> var editor =null;KindEditor.ready(function(K) {editor= K.create('#kindeditor', {cssPath : '<%=basePath%>kindeditor-4.1.10/plugins/code/prettify.css',uploadJson : '<%=basePath%>uloadondown.action',//上传的请求fileManagerJson : '<%=basePath%>fmanage.action',allowFileManager : true });});</script>//html代码<textarea id="kindeditor" name="data.tcontent"style="width:1000px;height:360px;"></textarea>

第三步写好相应的uploadimg .action和filemanage.action

filemanage

package .Action;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.InputStream;import java.io.PrintWriter;import java.text.SimpleDateFormat;import java.util.Arrays;import java.util.Date;import java.util.HashMap;import java.util.Random;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import mons.fileupload.servlet.ServletFileUpload;import org.apache.log4j.Logger;import org.apache.struts2.ServletActionContext;import org.json.simple.JSONObject;public class uploadimg extends BaseAction{static Logger log = Logger.getLogger(uploadimg.class);public String uloadondown() throws Exception { //响应 HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/html; charset=UTF-8"); PrintWriter out = response.getWriter(); //请求 HttpServletRequest request = this.getRequest(); //文件保存目录路径 String savePath = ServletActionContext.getServletContext().getRealPath("/")+ "attached/"; //文件保存目录URL String saveUrl = request.getContextPath() + "/attached/"; //定义允许上传的文件扩展名 HashMap<String, String> extMap = new HashMap<String, String>(); extMap.put("image", "gif,jpg,jpeg,png,bmp"); extMap.put("flash", "swf,flv"); extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb"); extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); //最大文件大小 long maxSize = 1000000; if(!ServletFileUpload.isMultipartContent(request)){ return error(out,"请选择文件。"); } //检查目录 File uploadDir = new File(savePath); if(!uploadDir.isDirectory()){ return error(out,"上传目录不存在。"); } //检查目录写权限 if(!uploadDir.canWrite()){ return error(out,"上传目录没有写权限。"); } String dirName = dir; if (dirName == null) { dirName = "image"; } if(!extMap.containsKey(dirName)){ return error(out,"目录名不正确。"); } //创建文件夹 savePath += dirName + "/"; saveUrl += dirName + "/"; File saveDirFile = new File(savePath); if (!saveDirFile.exists()) { saveDirFile.mkdirs(); } SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd"); String ymd = sdf.format(new Date()); savePath += ymd + "/"; saveUrl += ymd + "/"; File dirFile = new File(savePath); if (!dirFile.exists()) { dirFile.mkdirs(); } if(imgFile != null && !imgFile.toString().equals("")){ long fileSize = imgFile.length(); if(fileSize > maxSize){ return error(out,"上传文件大小超过限制。"); } //检查扩展名 String fileExt = imgFileFileName.substring(imgFileFileName.lastIndexOf(".") + 1).toLowerCase(); if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){ return error(out,"上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"); } SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss"); String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt; File uploadedFile = new File(savePath, newFileName); //获取文件输出流 FileOutputStream fos = new FileOutputStream(uploadedFile); //获取内存中当前文件输入流 InputStream in = new FileInputStream(imgFile); byte[] buffer = new byte[1024]; try { int num = 0; while ((num = in.read(buffer)) > 0) { fos.write(buffer, 0, num); } } catch (Exception e) { log.error("kindEditor上传文件出错了!"); return error(out,"上传的文件不存在!"); } finally { in.close(); fos.close(); } return success(out,saveUrl + newFileName); }else{ return error(out,"上传的文件不存在!"); } } @SuppressWarnings("unchecked") private String error(PrintWriter out,String message){ JSONObject obj = new JSONObject(); obj.put("error", 1); obj.put("message", message); out.println(obj.toJSONString()); return null; } @SuppressWarnings("unchecked") private String success(PrintWriter out,String url){ JSONObject obj = new JSONObject(); obj.put("error", 0); obj.put("url", url); out.println(obj.toJSONString()); return null; } /** * 上传的文件类型 */ public String dir; public File imgFile; private String imgFileFileName; public String getDir() { return dir; } public void setDir(String dir) { this.dir = dir; } public File getImgFile() { return imgFile; } public void setImgFile(File imgFile) { this.imgFile = imgFile; } public String getImgFileFileName() { return imgFileFileName; } public void setImgFileFileName(String imgFileFileName) { this.imgFileFileName = imgFileFileName; } }

filemanage.action

package .Action;import java.io.File;import java.io.PrintWriter;import java.text.SimpleDateFormat;import java.util.ArrayList;import java.util.Arrays;import java.util.Collections;import parator;import java.util.Hashtable;import java.util.List;import javax.servlet.http.HttpServletResponse;import org.apache.log4j.Logger;import org.apache.struts2.ServletActionContext;import org.json.simple.JSONObject;public class filemanage extends BaseAction{static Logger log = Logger.getLogger(filemanage.class);public String fmanage() throws Exception { // 请求 // 根目录路径,可以指定绝对路径,比如 /var/www/attached/ String rootPath = ServletActionContext.getServletContext().getRealPath("/")+ "attached/";// 根目录URL,可以指定绝对路径,比如 /attached/ String rootUrl = this.getRequest().getContextPath() + "/attached/"; // 图片扩展名 String[] fileTypes = new String[] { "gif", "jpg", "jpeg", "png", "bmp" }; String dirName = this.getRequest().getParameter("dir"); if (dirName != null) { if (!Arrays.<String> asList( new String[] { "image", "flash", "media", "file" }) .contains(dirName)) { log.error("Invalid Directory name."); } rootPath += dirName + "/"; rootUrl += dirName + "/"; File saveDirFile = new File(rootPath); if (!saveDirFile.exists()) { saveDirFile.mkdirs(); } } // 根据path参数,设置各路径和URL String currentPath = rootPath + path; String currentUrl = rootUrl + path; String currentDirPath = path; String moveupDirPath = ""; if (!"".equals(path)) { String str = currentDirPath.substring(0, currentDirPath.length() - 1); moveupDirPath = str.lastIndexOf("/") >= 0 ? str.substring(0, str.lastIndexOf("/") + 1) : ""; } // 排序形式,name or size or type String order = this.getRequest().getParameter("order") != null ? this.getRequest() .getParameter("order").toLowerCase() : "name"; // 不允许使用..移动到上一级目录 if (path.indexOf("..") >= 0) { log.error("Access is not allowed."); } // 最后一个字符不是/ if (!"".equals(path) && !path.endsWith("/")) { log.error("Parameter is not valid."); } // 目录不存在或不是目录 File currentPathFile = new File(currentPath); if (!currentPathFile.isDirectory()) { log.error("Directory does not exist."); } // 遍历目录取的文件信息 List<Hashtable> fileList = new ArrayList<Hashtable>(); if (currentPathFile.listFiles() != null) { for (File file : currentPathFile.listFiles()) { Hashtable<String, Object> hash = new Hashtable<String, Object>(); String fileName = file.getName(); if (file.isDirectory()) { hash.put("is_dir", true); hash.put("has_file", (file.listFiles() != null)); hash.put("filesize", 0L); hash.put("is_photo", false); hash.put("filetype", ""); } else if (file.isFile()) { String fileExt = fileName.substring( fileName.lastIndexOf(".") + 1).toLowerCase(); hash.put("is_dir", false); hash.put("has_file", false); hash.put("filesize", file.length()); hash.put("is_photo", Arrays.<String> asList(fileTypes) .contains(fileExt)); hash.put("filetype", fileExt); } hash.put("filename", fileName); hash.put("datetime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file .lastModified())); fileList.add(hash); } } if ("size".equals(order)) { Collections.sort(fileList, new SizeComparator()); } else if ("type".equals(order)) { Collections.sort(fileList, new TypeComparator()); } else { Collections.sort(fileList, new NameComparator()); } //响应 HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("application/json; charset=UTF-8"); PrintWriter out = response.getWriter(); JSONObject obj = new JSONObject(); obj.put("moveup_dir_path", moveupDirPath); obj.put("current_dir_path", currentDirPath); obj.put("current_url", currentUrl); obj.put("total_count", fileList.size()); obj.put("file_list", fileList); out.println(obj.toJSONString()); return null; } public class NameComparator implements Comparator {public int compare(Object a, Object b) { Hashtable hashA = (Hashtable) a; Hashtable hashB = (Hashtable) b; if (((Boolean) hashA.get("is_dir")) && !((Boolean) hashB.get("is_dir"))) { return -1; } else if (!((Boolean) hashA.get("is_dir")) && ((Boolean) hashB.get("is_dir"))) { return 1; } else { return ((String) hashA.get("filename")) .compareTo((String) hashB.get("filename")); } } } public class SizeComparator implements Comparator {public int compare(Object a, Object b) { Hashtable hashA = (Hashtable) a; Hashtable hashB = (Hashtable) b; if (((Boolean) hashA.get("is_dir")) && !((Boolean) hashB.get("is_dir"))) { return -1; } else if (!((Boolean) hashA.get("is_dir")) && ((Boolean) hashB.get("is_dir"))) { return 1; } else { if (((Long) hashA.get("filesize")) > ((Long) hashB .get("filesize"))) { return 1; } else if (((Long) hashA.get("filesize")) < ((Long) hashB .get("filesize"))) { return -1; } else { return 0; } } } } public class TypeComparator implements Comparator {public int compare(Object a, Object b) { Hashtable hashA = (Hashtable) a; Hashtable hashB = (Hashtable) b; if (((Boolean) hashA.get("is_dir")) && !((Boolean) hashB.get("is_dir"))) { return -1; } else if (!((Boolean) hashA.get("is_dir")) && ((Boolean) hashB.get("is_dir"))) { return 1; } else { return ((String) hashA.get("filetype")) .compareTo((String) hashB.get("filetype")); } } } public String path; public String getPath() { return path; } public void setPath(String path) { this.path = path; } }

第四步配置struts2

<action name="fmanage" class=".Action.filemanage" method="fmanage"> </action><action name="uloadondown" class=".Action.uploadimg" method="uloadondown"> </action>

这样就可以了

注意

新增时editor.sync();//先同步,才能拿到值

例如`function btn_add_news() {

editor.sync();//先同步,才能拿到值

var dataPara = getFormJson((“#example”));.ajax({

url : “insertNews”,

type : “post”,

data : dataPara,

dataType : ‘json’,

success : function(result) {

if(result.cf=="OK"){ parent.$.messager.alert('提示', "新增成功!");add_dialog.dialog('close');dataGrid.datagrid('load');}else{parent.$.messager.alert('提示', "新增失败!");}}});}`

修改时怎么把后台数据绑定到编辑器中只要一句代码

editor.html(result.tcontent);

例如、

$.ajax({type:"post",url:"getNewForm?id="+id,dataType:"json",success:function(result){$("#example").form('load',result);editor.html(result.tcontent);$('#dd').dialog({ title: '修改新闻', close:false});}});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。