CKeditor4.7.3标准版图片上传及相关配置

说明

CKeditor版本 ckeditor_4.7.3_standard
Tomcat版本 apache-tomcat-8.0.44

下载CKeditor和CKeditor文档

https://ckeditor.com/ckeditor-4/download/
https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_installation
https://ckeditor.com/cke4/addons/plugins/all 插件下载

图片上传

下载好了！那么开始吧！

CKeditor默认把上传图片功能隐藏了，感觉好贱哦~
那么，他和我们躲猫猫，我们就把他找出来吧!

引用CKeditor

以下代码是官方给出一切以官方为标准

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>A Simple Page with CKEditor</title><!-- Make sure the path to CKEditor is correct. --><script src="../ckeditor.js"></script></head><body><form><textarea name="editor1" id="editor1" rows="10" cols="80">This is my textarea to be replaced with CKEditor.</textarea><script>// Replace the <textarea id="editor1"> with a CKEditor// instance, using default configuration.CKEDITOR.replace( 'editor1' );</script></form></body>
</html>

引用正确后打开网页会看到CKeditor出来了！

为了上传图片，更改网页为jsp 这样我的Tomcat才可以发挥作用呀

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 引用ckeditor JS文件 -->
<script src="ckeditor/ckeditor.js"></script>
<title>CKEditor</title>
</head>
<body><center><form><textarea name="editor1" id="editor1" rows="10" cols="100">文字在这！This is my textarea to be replaced with CKEditor.</textarea><script>// Replace the <textarea id="editor1"> with a CKEditor// instance, using default configuration. 官方代码有部分改动，比如这个宽高设置CKEDITOR.replace( 'editor1',{ height: '240px', width: '520px' } );</script></form></center></body></html>

修改配置文件显示图片上传功能

修改image.js文件文件所在位置: ckeditor/plugins/image/dialogs/image.js
打开后你会发现，我屮艸芔茻哦这是什么鬼，好咯，被压缩了…没关系呀，eclipse的ctrl+f搜索一下不就好了
1. 搜索Upload 搜到的第一个后面会有一个hidden:!0 把感叹号去掉，保存，刷新页面，你就会发现上传功能现身了
2. config.image_previewText||”这里是CKeditor中显示一大串英文的东西，把这里内容去掉用来显示图片”
3. 既然是上传文件当然得有行为咯在ckeditor/config.js 在config.js 中增加一句:

//获取基地址
var location = (window.location+'').split('/');
var basePath = location[0]+'//'+location[2]+'/'+location[3];
config.filebrowserImageUploadUrl=basePath+"/upLoadFile.action";

意思为在上传图片的时候执行这个请求

行为接收upLoadFile.action的Servlet

文件上传用到了commons-fileupload
maven依赖

<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.2</version>
</dependency>

单纯的jar包下载地址 http://central.maven.org/maven2/commons-fileupload/commons-fileupload/1.3.2/commons-fileupload-1.3.2.jar

UpLoadFileServlet

文件上传思路与理解
1. 首先文件上传肯定不能上传到项目路径，因此我设置上传路径为项目部署路径上一级目录
2. 上传文件应该按照日期分类，以方便查看，不要为难自己嘛
3. 文件名，要么使用UUID，还是建议使用日期，以方便查看什么时候上传
4. 如果涉及多文件上传，那么保存的文件名不能重复，解决方案有，以时间命名精确到毫秒级别

上传图片需要显示在CKeditor中，那么CKeditor需要这些信息才能正确显示信息，所以需要回传一些数据给CKeditor

这是使用CKeditor上传图片发起的请求

//http://localhost:8080/CKEditor/upLoadFile.action?CKEditor=editor1&CKEditorFuncNum=0&langCode=zh-cn

String callback = req.getParameter("CKEditorFuncNum");
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
out.write("<script type=\"text/javascript\">");
out.write("window.parent.CKEDITOR.tools.callFunction("+callback+",'"+weburl+fileName+"',''"+")");
out.write("</script>");

注意: CKeditor 4.7.3上传执行的参数发生了变化详情请看代码

package com.yc.servlets;import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.List;import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileItemIterator;
import org.apache.commons.fileupload.FileItemStream;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;public class UpLoadFileServlet extends HttpServlet{private String uploadPath = null;private String filePath = "CKEditorPic";@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//CKeditor上传文件的请求参数  CKEditor=editor1&CKEditorFuncNum=0&langCode=zh-cn//http://localhost:8080/CKEditor/upLoadFile.action?CKEditor=editor1&CKEditorFuncNum=0&langCode=zh-cnString type = "image";//req.getParameter("type");   4.7.3版本无此参数FileItemFactory itemFactory = new DiskFileItemFactory();  ServletFileUpload servletFileUpload = new ServletFileUpload(itemFactory);  try {  FileItemIterator itemIterator = servletFileUpload.getItemIterator(req);  if (itemIterator.hasNext()) {  FileItemStream itemStream = itemIterator.next();  String name = itemStream.getName();  InputStream inputStream = itemStream.openStream();  String tagName = getTagName(name);  if ("image".equals(type)) {   //allowedImages.contains(tagName) && String fileName = this.geneFileName(tagName);  Calendar c = Calendar.getInstance();// 取tomcat路径 C:\apache-tomcat-8.0.44\webapps\CKEditorString tomcatdir = req.getRealPath("/"); File tomcatFile = new File(tomcatdir);// tomcatdir上一级路径 C:\apache-tomcat-8.0.44\webappsFile webapppath = tomcatFile.getParentFile(); // 生成文件路径File picpath = new File(webapppath, filePath + File.separator + c.get(Calendar.YEAR) + File.separator+ (c.get(Calendar.MONTH) + 1) + File.separator);// 浏览器中CKeditor图片访问路径名String weburl = "../"+filePath+"/" + c.get(Calendar.YEAR) + "/" + (c.get(Calendar.MONTH) + 1) + "/";// 判断目录是否存在，不在则创建if (picpath.exists() == false) {picpath.mkdirs();}//保存路径uploadPath = picpath.toString();//上传文件this.upload(inputStream, fileName);  //返回数据给CKeditor String callback = req.getParameter("CKEditorFuncNum");  resp.setContentType("text/html;charset=utf-8");  PrintWriter out = resp.getWriter();  out.write("<script type=\"text/javascript\">");  out.write("window.parent.CKEDITOR.tools.callFunction("+callback+",'"+weburl+fileName+"',''"+")");  out.write("</script>");  }  }  } catch (FileUploadException e) {  e.printStackTrace();  }  }//获取上传文件的后缀名private String getTagName(String fileName) {  int index = fileName.lastIndexOf(".")+1;  return fileName.substring(index);  }  //生成文件名  20171015210454919.pngprivate String geneFileName(String tagName) {  SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");  return sdf.format(new Date()) + "." + tagName;  } //写入磁盘private void upload(InputStream inputStream, String fileName) throws IOException {  File file = new File(uploadPath, fileName);  OutputStream os = new FileOutputStream(file);  byte[] bytes = new byte[1024];  int len = 0;  while ((len = inputStream.read(bytes)) != -1) {  os.write(bytes, 0, len);  }  inputStream.close();  os.close();  }
}

配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance   http://www.springmodules.org/schema/cache/springmodules-cache.xsd http://www.springmodules.org/schema/cache/springmodules-ehcache.xsd"xmlns="http://java.sun.com/xml/ns/javaee"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"metadata-complete="true" version="3.0"><display-name>Archetype Created Web Application</display-name><servlet><servlet-name>upLoadFileServlet</servlet-name><servlet-class>com.yc.servlets.UpLoadFileServlet</servlet-class></servlet><servlet-mapping><servlet-name>upLoadFileServlet</servlet-name><url-pattern>/upLoadFile.action</url-pattern></servlet-mapping></web-app>

好了，图片上传搞定

那么接下来，配置CKeditor吧简化功能or增加功能

CKeditor配置

依然是修改配置文件ckeditor/config.js
直接看说明吧，我简化了配置，保留了几个小功能即可

/*** CKEditor配置文件* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.* For licensing, see LICENSE.md or http://ckeditor.com/license*/CKEDITOR.editorConfig = function( config ) {// Define changes to default configuration here.// For complete reference see:// http://docs.ckeditor.com/#!/api/CKEDITOR.config// The toolbar groups arrangement, optimized for two toolbar rows.  //config.toolbarGroups 则不可以使用items 去掉Groups可自选items内容config.toolbar = [//提供复制张贴等   { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },//拼写检查等 { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },//链接    { name: 'links' },{ name: 'insert',   items: ['Image','HorizontalRule','SpecialChar','Smiley']    },//插入 包括图片，表格'Table'，水平线，特殊字符  表情'Smiley',分页符,'PageBreak{ name: 'forms' },  { name: 'tools',    items: ['Maximize'] }, //工具  用于编辑器全屏//包括源码等 { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },{ name: 'others' },'/',//加粗 倾斜 删除线等    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },//有序 无序 引用等 { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },//输入文字风格    { name: 'styles' },//  { name: 'colors' },//去掉？ 关于功能  { name: 'about' }];// Remove some buttons provided by the standard plugins, which are// not needed in the Standard(s) toolbar.config.removeButtons = 'Underline,Subscript,Superscript';// Set the most common block elements.config.format_tags = 'p;h1;h2;h3;pre';// Simplify the dialog windows.config.removeDialogTabs = 'image:advanced;link:advanced';//工具栏的位置 设置编辑器功能位置 默认top  bottomconfig.toolbarLocation = 'top';//当用户键入TAB时，编辑器走过的空格数，(&nbsp;) 当值为0时，焦点将移出编辑框  如果不设置则无任何效果 config.tabSpaces = 4;//工具栏默认是否展开config.toolbarStartupExpanded = true;//工具栏是否可以被收缩config.toolbarCanCollapse = true;//获取基地址var location = (window.location+'').split('/');var basePath = location[0]+'//'+location[2]+'/'+location[3];//写actionconfig.filebrowserImageUploadUrl=basePath+"/upLoadFile.action";};

好了，基本功能都OK了！

完整项目代码请移步百度网盘链接：http://pan.baidu.com/s/1pLbrmx9 密码：5jas