CKEditor开放自带上传图片功能-->java/jsp方向

最近公司项目要求使用一个在线编辑器,之前只用过FCK的,,然后觉得FCK的界面不好看,所以换了一个,它的后续版本的CKEditor,

不得不说 CKEditor使用起来要方便的多....使用方法就不在赘述..

ps:本次使用的是java版的CKEditor3.5.3, 而不是纯javascritp..

主要是在使用的时候遇到了上传图片的问题..CKEditor默认在jsp中是没有开放上传功能的,而在PHP中有一个CKFinder插件来帮助完成,,

但是那个插件不怎么好用..再加上网上搜到的解决办法都比较麻烦,很多都是自己重写一个上传功能,但是自己做一个的话,还得自己做图片预览的功能,,,所以只能转头研究CK的源码..

经过2天的研究,,,在image.js中找到了控制上传的代码.

搜索"Upload"关键字.

会找到页面上上传的功能Element,这里有一个hidden属性,默认为true,改为false就可以在页面上显示出"上传"功能

ps:建议将Link(图片链接),和advanced(高级),都设置为true,只留下第一个info,和upload,之所以只留这两个功能,

1:info中的源地址与Link中的源地址作用相同.

2.原本info是有一个浏览服务器文件的功能的,但因为安全性的考虑,故舍弃,改为上传后手动设置预览图.

3.高级功能作用不实际,并且难操作,故屏蔽.

其中upload功能块,只保留一个文件上传,和一个上传按钮...

页面上,

<%

String value = "My first <strong>CKEditor</strong> Java tag";

CKEditorConfig settings = new CKEditorConfig(); //声明实例

settings.addConfigValue("skin", "kama"); //使用皮肤

settings.addConfigValue("width", "500"); //设置宽度

settings.addConfigValue("uiColor", "skyblue"); //设置编辑器UI颜色

settings.addConfigValue("filebrowserUploadUrl",""+ basePath +"uploadimage.jsp"); //(重要)设置上传图片Form的Action地址

settings.addConfigValue("toolbar", "[['Format'],['Bold','Italic','Underline','Strike','Image','-','Subscript','Superscript']]");

//自定义功能版所支持的功能.(具体参照官方参数.)

%>

<ckeditor:editor editor="detail" basePath="ckeditor/" config="<%=settings %>" value="<%= value %>"/>

<input type="submit" value="提交">

文件上传的name为 upload,(目前还不知道怎么改,直接修改image.js中的id,会提示在页面上找不到W)

所以如果用struts2的话,应该在Action中对应为upload..

下面的js代码就会将上传的图片显示到预览图的位置.

out.println("<script language='javascript'>");

out.println("parent.document.getElementById('cke_38_textInput').value = '" + "uploadfile/images/" + name + "'");

out.println("parent.document.getElementById('cke_34_previewImage').src = '" + "uploadfile/images/" + name + "'");

out.println("parent.document.getElementById('cke_34_previewImage').style.display = ''");

out.println("</script>");

name表示文件名,也即是上传后实际保存时的文件名..

本人采用的是提交后,直接返回js代码(返回后属于子窗口,所以要加parent),也可以写成function到页面上,供CKEditor自己调用.

调用方法:

id : 'Upload',

onChange : function(){

document.getElementById('cke_38_textInput').value = "uploadfile/images/" + name;

document.getElementById('cke_34_previewImage').src ="uploadfile/images/" + name;

document.getElementById('cke_34_previewImage').style.display = '';

}

hidden : false

...

完成效果.:







OK 是服务器返回的信息,非ckeditor自带.





最后,如果能在上传成功后直接调用Info的onChange方法的话,是最完美的..可是我始终调用不了这个方法...

完毕,各位自己去测试吧. 另在image.js中有些方法也可以自己改动,如onOK-->表示在点击确定时会触发的方法.