kindeditor java 上传图片_KindEditor富文本框编辑器上传图片功能实现,基于java项目...

本文详细介绍了如何在Java后端实现KindEditor富文本编辑器的图片上传功能,包括HTML标签和jQuery代码设置,以及Java后台处理图片上传的方法,包括文件保存路径配置、文件类型检查和文件大小限制等关键步骤。
摘要由CSDN通过智能技术生成

1. HTML标签与jquery代码

// 编辑富文本框

KindEditor.ready(function(K) {

var editor = K.create('#editor_id', {

themeType : "simple",

uploadJson : CONTEXT_PATH + "transportations/describe/upload",

resizeType : 1,

imageTabIndex : 1,

filterMode : true,

allowPreviewEmoticons : false,

allowImageUpload : true,

allowFileManager : true,

afterBlur : function() {

this.sync();

},

afterUpload : function(url) {

//上传图片后的代码

var image = "%22+url+%22";

insertHtmlAtCaret(image);

},

items : [ 'source', 'undo', 'redo', 'plainpaste', 'wordpaste', 'clearhtml', 'quickformat', 'selectall', 'fullscreen', 'fontname', 'fontsize', '|', 'forecolor',

'hilitecolor', 'bold', 'italic', 'underline', 'hr', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',

'insertunorderedlist', '|', 'link', 'image', 'unlink', 'baidumap', 'emoticons' ]

});

});

// 在光标处添加内容

function insertHtmlAtCaret(html) {

var sel, range;

if (window.getSelection) {

sel = window.getSelection();

if (sel.getRangeAt && sel.rangeCount) {

range = sel.getRangeAt(0);

range.deleteContents();

var el = document.createElement("textarea");

el.innerHTML = html;

var frag = document.createDocumentFragment(), node, lastNode;

while ((node = el.firstChild)) {

lastNode = frag.appendChild(node);

}

range.insertNode(frag);

if (lastNode) {

range = range.cloneRange();

range.setStartAfter(lastNode);

range.collapse(true);

sel.removeAllRanges();

sel.addRange(range);

}

}

} else if (document.selection && document.selection.type != "Control") {

document.selection.createRange().pasteHTML(html);

}

}

2. java后台实现

/**

*

* 富文本框编辑-上传图片

*

* @param localUrl

* @return

* @throws IOException

* @throws FileUploadException

*/

@RequestMapping(value = "upload")

public void uploadImg(HttpServletRequest request, HttpServletResponse response)

{

// 设置Response响应的编码

response.setContentType("text/html; charset=UTF-8");

// 获取一个Response的Write对象

PrintWriter writer = null;

try

{

writer = response.getWriter();

// 文件保存目录路径

String savePath = request.getServletContext().getRealPath("/") + "attached/";

// 文件保存目录URL

String saveUrl = request.getContextPath() + "/attached/";

// 定义允许上传的文件扩展名

HashMap extMap = new HashMap();

extMap.put("image", "gif,jpg,jpeg,png,bmp");

// 最大文件大小

long maxSize = 1000000;

// 判断是否是一个文件

if (!ServletFileUpload.isMultipartContent(request))

{

writer.println(getError("请选择文件。"));

return;

}

// 检查目录upload, 没有则创建一个

File uploadDir = new File(savePath);

if (!uploadDir.isDirectory())

{

uploadDir.mkdirs();

}

// 检查目录写权限

if (!uploadDir.canWrite())

{

writer.println(getError("上传目录没有写权限。"));

return;

}

String dirName = request.getParameter("dir");

if (dirName == null)

{

dirName = "image";

}

if (!extMap.containsKey(dirName))

{

writer.println(getError("目录名不正确。"));

return;

}

// 创建文件夹

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();

}

DefaultMultipartHttpServletRequest servletRequest = (DefaultMultipartHttpServletRequest) request;

Iterator iterator = servletRequest.getFileNames();

while (iterator.hasNext())

{

MultipartFile file = servletRequest.getFile(iterator.next());

String fileName = file.getOriginalFilename();

// 检查文件大小

if (file.getSize() > maxSize)

{

writer.println(getError("上传文件大小超过限制。"));

return;

}

// 检查扩展名

String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();

if (!Arrays. asList(extMap.get(dirName).split(",")).contains(fileExt))

{

writer.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));

return;

}

// 以时间重新命名文件名

String newFileName = CommonUtils.newFileName(fileName);

File uploadedFile = new File(savePath, newFileName);

file.transferTo(uploadedFile);

JSONObject obj = new JSONObject();

obj.put("error", 0);

obj.put("url", saveUrl + newFileName);

writer.println(obj.toJSONString());

}

}

catch (Exception e)

{

logger.error("上传文件失败!" + e.getMessage());

}

finally

{

// 将writer对象中的内容输出

writer.flush();

// 关闭writer对象

writer.close();

}

}

/**

*

* 上传图片-响应错误信息

*

* @author

* @param message

* @return

*/

private String getError(String message)

{

JSONObject obj = new JSONObject();

obj.put("error", 1);

obj.put("message", message);

return obj.toJSONString();

}

关于KindEditor编辑器,了解更多请参考官网文档;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值