html在线上传,KindEditor 实现图文上传方法介绍

KindEditor编辑是一款不错的网页编辑器，它现在可实现从复制word文件档把图片上传到服务器了，下面我们来看看配置KindEditor图文上传方法。

1.官网下载ckeditor，解压后去掉不需要的部分，仅需保留plugin,lang,theme文件夹，这三个文件夹中用不到的东西可以删除，比如lang文件下存放所有语言文件js，仅仅保留en.js和zh_CN.js即可，保留jsp文件夹下的json_upload.jsp文件和kindeditor.js文件即可

2.配置使用ckeditor

实例

代码如下

复制代码

KindEditor 要求的JSON格式如下： {"error":0,"message":".....","url":"/img/1111.gif"} 其中当error值为0时表示上传成功，需要指定url值为图片保存后的URL地址，如果error值不为0，则设置message值为错误提示信息 首先指定上传处理的URI KE.show({ id : 'ta_blog_content', resizeMode : 1, shadowMode : false, allowPreviewEmoticons : false, urlType : 'absolute', allowUpload : true, //允许上传图片 imageUploadJson : '/action/blog/upload_img' //服务端上传图片处理URI }); 图片上传处理方法  代码如下 复制代码 /** * 图片上传 * @param ctx * @throws IOException */ @Annotation.PostMethod @Annotation.JSONOutputEnabled public void upload_img(RequestContext ctx) throws IOException { File imgFile = ctx.image("imgFile"); if(imgFile.length() > MAX_IMG_SIZE ){ ctx.output_json( new String[]{"error","message"}, new Object[]{1,ResourceUtils.getString("error", "file_too_large", MAX_IMG_SIZE/1024)} ); return ; } String uri = new SimpleDateFormat("yyyyMMdd").format(new Date()) "/IMG_" RandomStringUtils.randomAlphanumeric(4) '_' String.valueOf(ctx.user().getId()) '.' FilenameUtils.getExtension(imgFile.getName()).toLowerCase(); Multimedia.saveImage(imgFile, img_path uri, 0, 0); ctx.output_json(new String[]{"error","url"}, new Object[]{0, LinkTool.upload("space/" uri)}); } 实例  代码如下 复制代码 //加载kindeditor KindEditor.ready(function(K) { var editor = K.create('textarea[name="messageContent"],textarea[name="updateMessageContent"]', { uploadJson : '${ctx}/static/common/kindeditor-4.1/jsp/upload_json.jsp', //指定上传图片的服务器端程序 allowUpload : true, urlType : 'absolute', resizeType : 0,  //文本框不可拖动 items : [  //配置工具栏 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'emoticons', 'image', 'link'], afterCreate : function(){ //kindeditor创建后，将编辑器的内容设置到原来的textarea控件里 this.sync(); }, afterChange: function(){ //编辑器内容发生变化后，将编辑器的内容设置到原来的textarea控件里 this.sync(); }, afterBlur : function(){ //编辑器聚焦后，将编辑器的内容设置到原来的textarea控件里 this.sync(); } }); 首先 name=messageContent,是textarea的name属性 uploadJson部分是请求图片上传处理的jsp，即json_upload.jsp。注意路径写对就可以完成。关于如何配置详细参数请参考点击打开链接 修改json_upload.jsp文件保存路径即可修改一下两句即可。 //文件保存目录路径  代码如下 复制代码 String savePath = pageContext.getServletContext().getRealPath("/upload"); //文件保存目录URL,此处为绝对路径  代码如下 复制代码 String saveUrl  = request.getContextPath() "/upload";