1 在线HTML文档编辑器使用入门之图片上传与图片管理的实现:
2 官方网址: http://kindeditor.net/demo.php
3 开发步骤:
4 1.开发中只需要导入选中的文件(通常在 webapp 下,建立 editor 文件夹 )
5 导入:lang、plugins、themes、kindeditor.js/kindeditor-min.js-->放在editor文件夹下
6 2.在页面上引入相关的js&css文件
7 <!-- 导入Kindeditor相关文件 -->
8 <script type="text/javascript" src="../../editor/lang/zh_CN.js"></script>
9 <script type="text/javascript" src="../../editor/kindeditor.js"></script>
10 <link rel="stylesheet" href="../../editor/themes/default/default.css" />
11 3.在页面提供标签<textarea id="ta" name="ta"></textarea>
12 KindEditor.ready(function(K) {
13 window.editor = K.create("#ta");
14 4.定制工具栏按钮显示:
15 KindEditor.ready(function(K) {
16 window.editor = K.create("#ta", {
17 items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
18 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
19 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
20 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
21 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
22 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
23 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
24 'anchor', 'link', 'unlink', '|', 'about'
25 ],allowFileManager:true,
26 uploadJson:"../../image_upload.action",
27 fileManagerJson:"../../image_manager.action"
28 });
29 5.上传图片与图片管理功能实现:
30 页面提供对应方法:
31 allowFileManager、uploadJson、fileManagerJson-->发送请求到后台action处理:
32 //提供属性注入
33 private File imgFile;
34 private String imgFileFileName;
35 private String imgFileContentType;
36 //图片上传方法
37 @Action(value = "image_upload", results = { @Result(name = "success", type = "json") })
38 public String uploadImg() throws IOException {
39 System.out.println("file:" + imgFile);
40 System.out.println("文件名称:" + imgFileFileName);
41 System.out.println("文件类型:" + imgFileContentType);
42 String savePath = ServletActionContext.getServletContext().getRealPath(
43 "/upload/");
44 String saveUrl = ServletActionContext.getRequest().getContextPath()
45 + savePath;
46 // 生成随即图片名称
47 UUID randomUUID = UUID.randomUUID();
48 String ext = imgFileFileName
49 .substring(imgFileFileName.lastIndexOf("."));
50 String randomUrl = randomUUID + ext;
51 // 保存图片(绝对的路径和)
52 FileUtils.copyFile(imgFile, new File(savePath + "/" + randomUrl));
53 // 返回浏览器数据(文件上传成功了还是失败了)
54 Map<String, Object> map = new HashMap<String, Object>();
55 map.put("error", 0);
56 map.put("url", saveUrl + randomUrl);
57 ServletActionContext.getContext().getValueStack().push(map);
58 return SUCCESS;
59 }
60
61 //图片管理方法
62 @Action(value = "image_manager", results = { @Result(name = "success", type = "json") })
63 public String manager() {
64 // 根目录路径(绝对路径)
65 String rootPath = ServletActionContext.getServletContext().getRealPath(
66 "/")
67 + "upload/";
68 // 根目录URL(绝对路径)
69 String rootUrl = ServletActionContext.getRequest().getContextPath()
70 + "/upload/";
71 List<Map<String, Object>> fileList = new ArrayList<Map<String, Object>>();
72 // 当前上传目录
73 File currentPathFile = new File(rootPath);
74 // 图片的扩展名
75 String[] fileTypes = new String[] { "gif", "jpg", "jpeg", "png", "bmp" };
76
77 if (currentPathFile.listFiles() != null) {
78 // 遍历目录取的文件信息
79 for (File file : currentPathFile.listFiles()) {
80 Map<String, Object> hash = new HashMap<String, Object>();
81 String fileName = file.getName();
82 if (file.isDirectory()) {
83 hash.put("is_dir", true);
84 hash.put("has_file", (file.listFiles() != null));
85 hash.put("filesize", 0L);
86 hash.put("is_photo", false);
87 hash.put("filetype", "");
88 } else if (file.isFile()) {
89 String fileExt = fileName.substring(
90 fileName.lastIndexOf(".") + 1).toLowerCase();
91 hash.put("is_dir", false);
92 hash.put("has_file", false);
93 hash.put("filesize", file.length());
94 hash.put("is_photo", Arrays.<String> asList(fileTypes)
95 .contains(fileExt));
96 hash.put("filetype", fileExt);
97 }
98 hash.put("filename", fileName);
99 hash.put("datetime",
100 new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file
101 .lastModified()));
102 fileList.add(hash);
103 }
104 }
105 Map<String, Object> result = new HashMap<String, Object>();
106 result.put("moveup_dir_path", "");
107 result.put("current_dir_path", rootPath);
108 result.put("current_url", rootUrl);
109 result.put("total_count", fileList.size());
110 result.put("file_list", fileList);
111 ActionContext.getContext().getValueStack().push(result);
112 return SUCCESS;
113 }
114