在线HTML文档编辑器使用入门之图片上传与图片管理的实现:
官方网址: http://kindeditor.net/demo.php
开发步骤:
1.开发中只需要导入选中的文件(通常在 webapp 下,建立 editor 文件夹 )
导入:lang、plugins、themes、kindeditor.js/kindeditor-min.js-->放在editor文件夹下
2.在页面上引入相关的js&css文件
<!-- 导入Kindeditor相关文件 -->
<script type="text/javascript" src="../../editor/lang/zh_CN.js"></script>
<script type="text/javascript" src="../../editor/kindeditor.js"></script>
<link rel="stylesheet" href="../../editor/themes/default/default.css" />
3.在页面提供标签<textarea id="ta" name="ta"></textarea>
KindEditor.ready(function(K) {
window.editor = K.create("#ta");
4.定制工具栏按钮显示:
KindEditor.ready(function(K) {
window.editor = K.create("#ta", {
items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
],allowFileManager:true,
uploadJson:"../../image_upload.action",
fileManagerJson:"../../image_manager.action"
});
5.上传图片与图片管理功能实现:
页面提供对应方法:
allowFileManager、uploadJson、fileManagerJson-->发送请求到后台action处理:
//提供属性注入
private File imgFile;
private String imgFileFileName;
private String imgFileContentType;
//图片上传方法
@Action(value = "image_upload", results = { @Result(name = "success", type = "json") })
public String uploadImg() throws IOException {
System.out.println("file:" + imgFile);
System.out.println("文件名称:" + imgFileFileName);
System.out.println("文件类型:" + imgFileContentType);
String savePath = ServletActionContext.getServletContext().getRealPath(
"/upload/");
String saveUrl = ServletActionContext.getRequest().getContextPath()
+ savePath;
// 生成随即图片名称
UUID randomUUID = UUID.randomUUID();
String ext = imgFileFileName
.substring(imgFileFileName.lastIndexOf("."));
String randomUrl = randomUUID + ext;
// 保存图片(绝对的路径和)
FileUtils.copyFile(imgFile, new File(savePath + "/" + randomUrl));
// 返回浏览器数据(文件上传成功了还是失败了)
Map<String, Object> map = new HashMap<String, Object>();
map.put("error", 0);
map.put("url", saveUrl + randomUrl);
ServletActionContext.getContext().getValueStack().push(map);
return SUCCESS;
} //图片管理方法
@Action(value = "image_manager", results = { @Result(name = "success", type = "json") })
public String manager() {
// 根目录路径(绝对路径)
String rootPath = ServletActionContext.getServletContext().getRealPath(
"/")
+ "upload/";
// 根目录URL(绝对路径)
String rootUrl = ServletActionContext.getRequest().getContextPath()
+ "/upload/";
List<Map<String, Object>> fileList = new ArrayList<Map<String, Object>>();
// 当前上传目录
File currentPathFile = new File(rootPath);
// 图片的扩展名
String[] fileTypes = new String[] { "gif", "jpg", "jpeg", "png", "bmp" }; if (currentPathFile.listFiles() != null) {
// 遍历目录取的文件信息
for (File file : currentPathFile.listFiles()) {
Map<String, Object> hash = new HashMap<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);
}
}
Map<String, Object> result = new HashMap<String, Object>();
result.put("moveup_dir_path", "");
result.put("current_dir_path", rootPath);
result.put("current_url", rootUrl);
result.put("total_count", fileList.size());
result.put("file_list", fileList);
ActionContext.getContext().getValueStack().push(result);
return SUCCESS;
}

在线HTML文档编辑器使用入门之图片上传与图片管理的实现的更多相关文章

  1. 推荐ajaxfilemanager for tiny_mce 比较完善的tiny_mce编辑器的图片上传及图片管理插件PHP版 支持中文

    tiny_mce编辑器,我觉得挺简洁.好用的,但就是图片上传的插件是收费的,而且网上找了半天也没有找到开源好用的上传插件. 不过功夫不负有心人,终于还就被我找到一款相当满意的插件. 这个插件的名字叫a ...

  2. swagger在线api文档搭建指南,用于线上合适么?

    在上一篇文章中,我们讲解了什么是 api,什么是 sdk: https://www.cnblogs.com/tanshaoshenghao/p/16217608.html 今天将来到我们万丈高楼平地起 ...

  3. 解决SharePoint 文档库itemadded eventhandler导致的上传完成后,编辑页面保持报错的问题,错误信息为“该文档已经被编辑过 the file has been modified by...”

    在文档库中添加itemadded 后,在上传文件后,会自动打开文档属性的编辑页面,在保存的时候就会报错,说这个文档已经被编辑过了.这是应为默认itemadded实践是异步执行的,会在edit页面打开之 ...

  4. 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...

  5. 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

    富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...

  6. C# 10分钟入门基于WebOffice实现在线编辑文档,实时保存到服务器(所有office,兼容WPS)

    今天,他来了(weboffice在线编辑文档). 上次写了一个在线预览的博,当然,效果并不是太理想,但是紧急解决了当时的问题. 后来,小编重新查找资料,求助大牛,终于使用新的方式替换了之前的low方法 ...

  7. (六)在线文档编辑器的使用和数据字典(ueditor编辑器/my97datepicker日期控件)

    使用ueditor编辑器注意: 1. 要把ueditor的jar包添加到WEB-INF/lib里. 2. 在做图片上传等功能时,必须重写struts的过滤器,否则图片流会被拦截程序无法得到图片. 3. ...

  8. Jeecg社区wiki在开放,最终能够在线看文档啦!!!

    Jeecg社区wiki在开放,最终能够在线看文档啦! .! 2014-12-18 scott JEECG jeecg开源社区wiki正式启动了.方便大家看文档 訪问地址是: http://osbaba ...

  9. 使用swagger实现web api在线接口文档

    一.前言 通常我们的项目会包含许多对外的接口,这些接口都需要文档化,标准的接口描述文档需要描述接口的地址.参数.返回值.备注等等:像我们以前的做法是写在word/excel,通常是按模块划分,例如一个 ...

随机推荐

  1. cookie的优缺点

    优点  :极高的扩展性和可用性 1.通过良好的编程,控制保存在cookie中的session对象的大小. 2.通过加密和安全传输技术(ssl),减少cookie被破解的可能性 3.只有cookie中存 ...

  2. shell中tr的用法

    转自http://blog.csdn.net/zhuying_linux/article/details/6825568 tr(translate缩写)主要用于删除文件中的控制字符,或进行字符转换.语 ...

  3. P1975 [国家集训队]排队 线段树套平衡树维护动态逆序对查询

    $ \color{#0066ff}{ 题目描述 }$ 排排坐,吃果果,生果甜嗦嗦,大家笑呵呵.你一个,我一个,大的分给你,小的留给我,吃完果果唱支歌,大家乐和和. 红星幼儿园的小朋友们排起了长长地队伍 ...

  4. python学习笔记1.4

    注释不被程序执行的辅助性说明信息- 单行注释:以#开头,其后内容为注释# 这里是单行注释- 多行注释:以'''开头和结尾''' 这是多行注释第一行这是多行注释第二行 ''' 保留字and elif i ...

  5. pip安装本地文件

    I do a lot of development without an internet connection1, so being able to install packages into a ...

  6. asp 程序 转 php

    常年做web的,工作需要,可能有的时候需要将asp代码批量转换成php,最近发现一个小东西很不错,虽不能100%转换(毕竟是程序),但是大大提高了工作效率 Asp2Php是一个可以将ASP转化成PHP ...

  7. 基础篇:6.1)形位公差-要素 Feature

    本章目的:理解形位公差研究的对象-要素,即点.线.面. 1.定义 2.类型 2.1 按存在的状态分 2.2 按结构特征分 2.3 按所处的地位分 2.4  按结构性能分 2.5  按与尺寸关系分

  8. mybatis映射文件模板mapper.xml格式

    1.定义基础的映射 对象DO与数据库字段间的映射 <resultMap id="UserResult" type="UserDO"> <res ...

  9. jQuery懒加载插件 – jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  10. 更改kindeditor编辑器,改用支持h5的video标签替换原有embed标签

    kindeditor是一款不错的可视化编辑器,不过最近几年似乎没在更新,现在h5趋于主流,正好有个业务需要编辑器支持mp4视频的播放,考虑到现在h5中的video标签的强大,于是决定将原来系统中的em ...