当前位置:编程学习 > JSP >>

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";
补充:Jsp教程,Java基础 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,