本人用的
CKEditor版本为4.3
CKEditor
配置。
CKEditor编辑器的工具栏中图像初始的时候应该是这样子的,没有图片上传按钮
并且预览中有一堆火星文,可以修改相应配置删除它。
方法:
打开config.js文件,加入下面一句话
config.image_previewText=' '; //预览区域显示内容
下面研究图片上传
要先出现上传按钮,有两种方法我就写其中一种简单
易懂
明了的Method
打开config.js文件,加入下面一句话
config.filebrowserImageUploadUrl= "
/module/news/imageUpload.action
"; //待会要上传的action或servlet
OK现在基本上是下面这个样子的了
上面的只是一个上传页面。也就相当于一个HTML的form表单,
要配置点击"上传到服务器上"按钮后请求的Action。已在ckeditor/config.js中配置。
就是上面的 config.filebrowserImageUploadUrl = "/module/news/imageUpload.action";
接下来就是action中的上传方法:
- public class ImageUpload extends WebSupport {
- private File upload; //文件
- private String uploadContentType; //文件类型
- private String uploadFileName; //文件名
- /**
- * 图片上传
- * @return
- * @throws IOException
- */
- public String fileUpload() throws IOException{
- //HttpServletResponse response = ServletActionContext.getResponse();
- getResponse().setCharacterEncoding("utf-8");
- PrintWriter out = getResponse().getWriter();
- // CKEditor提交的很重要的一个参数
- String callback = getRequest().getParameter("CKEditorFuncNum");
- String expandedName = ""; //文件扩展名
- if (uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) {
- //IE6上传jpg图片的headimageContentType是image/pjpeg,而IE9以及火狐上传的jpg图片是image/jpeg
- expandedName = ".jpg";
- }else if(uploadContentType.equals("image/png") || uploadContentType.equals("image/x-png")){
- //IE6上传的png图片的headimageContentType是"image/x-png"
- expandedName = ".png";
- }else if(uploadContentType.equals("image/gif")){
- expandedName = ".gif";
- }else if(uploadContentType.equals("image/bmp")){
- expandedName = ".bmp";
- }else{
- out.println("<script type=\"text/javascript\">");
- out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)');");
- out.println("</script>");
- return null;
- }
- if(upload.length() > 600*1024){
- out.println("<script type=\"text/javascript\">");
- out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件大小不得大于600k');");
- out.println("</script>");
- return null;
- }
- InputStream is = new FileInputStream(upload);
- String uploadPath = ServletActionContext.getServletContext().getRealPath("/img/uploadImg");
- String fileName = java.util.UUID.randomUUID().toString(); //采用时间+UUID的方式随即命名
- fileName += expandedName;
- File file = new File(uploadPath);
- if(!file.exists()){ //如果路径不存在,创建
- file.mkdirs();
- }
- File toFile = new File(uploadPath, fileName);
- OutputStream os = new FileOutputStream(toFile);
- byte[] buffer = new byte[1024];
- int length = 0;
- while ((length = is.read(buffer)) > 0) {
- os.write(buffer, 0, length);
- }
- is.close();
- os.close();
- // 返回"图像"选项卡并显示图片
- out.println("<script type=\"text/javascript\">");
- out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "/img/uploadImg/" + fileName + "','')");
- out.println("</script>");
- return null;
- }
- public File getUpload() {
- return upload;
- }
- public void setUpload(File upload) {
- this.upload = upload;
- }
- public String getUploadContentType() {
- return uploadContentType;
- }
- public void setUploadContentType(String uploadContentType) {
- this.uploadContentType = uploadContentType;
- }
- public String getUploadFileName() {
- return uploadFileName;
- }
- public void setUploadFileName(String uploadFileName) {
- this.uploadFileName = uploadFileName;
- }
- }
config.js
*.xml
- CKEDITOR.editorConfig = function( config ) {
- config.filebrowserImageUploadUrl = "/module/news/imageUpload.action"; //固定路径
- config.image_previewText=' '; //预览区域显示内容
<action name="imageUpload" class="你的Action URL" method="fileUpload">
<result name="success"></result>
</action>
<result name="success"></result>
</action>
最后上传图片成功
jsp页面配置控件
往页面导入ckeditor/ckeditor.js
<script type="text/javascript">
CKEDITOR.replace('TextArea1');
</script>
<textarea id="TextArea1" name=" newsBody " cols="20" rows="5" class="ckeditor"></textarea>
CKEDITOR.replace('TextArea1');
</script>
<textarea id="TextArea1" name=" newsBody " cols="20" rows="5" class="ckeditor"></textarea>
PS:不同版本实现的方法与效果可能不太一样,只作参考。