KindEditor 实现图文上传方法介绍
1.官网下载ckeditor,解压后去掉不需要的部分,仅需保留plugin,lang,theme文件夹,这三个文件夹中用不到的东西可以删除,比如lang文件下存放所有语言文件js,仅仅保留en.js和zh_CN.js即可,保留jsp文件夹下的json_upload.jsp文件和kindeditor.js文件即可
2.配置使用ckeditor
实例
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy2574')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy2574>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
});
图片上传处理方法
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy5293')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy5293>/**
* 图片上传
* @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)});
}
实例
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy9420')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy9420>
//加载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文件保存路径即可修改一下两句即可。
//文件保存目录路径
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy7587')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy7587>String savePath = pageContext.getServletContext().getRealPath("/upload");//文件保存目录URL,此处为绝对路径
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy9367')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy9367>String saveUrl = request.getContextPath() "/upload";您可能感兴趣的文章:
KindEditor 实现图文上传方法介绍
phpweb更换kindeditor编辑器的过程
php中kindeditor多图上传session丢失问题解决
jQuery读取和设定KindEditor值的方法
php KindEditor文章内分页的实例方法
php文件上传代码大全(实例分享)
KindEditor编辑器调用方法
php正则匹配图片路径原理与方法
PHP上传文件过大$_FILES为空的解决方法
php绘图不显示图片怎么办