关于Ckeditor编辑器（一）
ckeditor编辑器上传图片
1.基本配置
a.官网下载ckeditor压缩包。
官网地址
b.将解压后的js引入页面
如：
<script src="${ctxPath}/static/ckeditor4.8/ckeditor.js"></script>
<script src="${ctxPath}/static/ckeditor4.8/adapters/jquery.js"></script>
c.需要使用该编辑器的页面增加 textarea
<textarea class="ckeditor" id="editor1" name="editor1" cols="100" rows="100"></textarea>
d.修改配置文件config.js里图片上传路径
config.filebrowserImageUploadUrl=“imageUpload”;
其中
imageUpload为处理图片上传的方法
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
//{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
//{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'tools' },
//{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
//{ name: 'others' },
'/',
{ name: 'styles' },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'colors' },
//{ name: 'about' }
];
config.removeButtons = 'Underline,Subscript,Superscript';
config.format_tags = 'p;h1;h2;h3;pre';
config.removeDialogTabs = 'image:advanced;link:advanced';
config.image_previewText=' '; //预览区域显示内容
config.filebrowserImageUploadUrl="imageUpload"; //要上传的action或servlet
//config.width=1200;//宽度
config.height = 500; //高度
config.extraPlugins = 'font,justify';//支持中文字体字号，和文字居中
config.font_names = '宋体/SimSun;新宋体/NSimSun;仿宋/FangSong;楷体/KaiTi;仿宋_GB2312/FangSong_GB2312;'+
'楷体_GB2312/KaiTi_GB2312;黑体/SimHei;华文细黑/STXihei;华文楷体/STKaiti;华文宋体/STSong;华文中宋/STZhongsong;'+
'华文仿宋/STFangsong;华文彩云/STCaiyun;华文琥珀/STHupo;华文隶书/STLiti;华文行楷/STXingkai;华文新魏/STXinwei;'+
'方正舒体/FZShuTi;方正姚体/FZYaoti;细明体/MingLiU;新细明体/PMingLiU;微软雅黑/Microsoft YaHei;微软正黑/Microsoft JhengHei;'+
'Arial Black/Arial Black;';
config.FontSizes = '56px/初号;48px/小初;34px/一号;32px/小一;29px/二号;24px/小二;21px/三号;20px/小三;18px/四号;16px/小四;14px/五号;12px/小五;10px/六号;8px/小六' ; //设置字体大小时 使用的式样
//当从word里复制文字进来时，是否进行文字的格式化去除
config.pasteFromWordIgnoreFontFace = true; //默认为忽略格式
//工具栏是否可以被收缩
config.toolbarCanCollapse = true;
config.removePlugins = 'elementspath';
};
e.后台代码处理上次结果并返回到页面
@Get("imageUpload")
@Post("imageUpload")
public void ImageUpload(HttpServletRequest request, HttpServletResponse response){
try {
ImageUploadUtil.ckeditor(request, response);
} catch (IllegalStateException e) {
PrintException.printStackTrace(e);
} catch (IOException e) {
PrintException.printStackTrace(e);
}
}
/**
* ckeditor文件上传功能，回调，传回图片路径，实现预览效果。
*
* @Title ckeditor
* @param request
* @param response
*
* @throws IOException
*/
public static void ckeditor(HttpServletRequest request, HttpServletResponse response)
throws IOException {
String fileName = upload(request, response);
if(fileName==null){
response.setContentType("text/html;charset=UTF-8");
String callback = request.getParameter("CKEditorFuncNum");
PrintWriter out = response.getWriter();
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",''," + "'文件格式不正确（必须为.jpg/.gif/.bmp/.png/.jpeg文件）');");
out.println("</script>");
out.flush();
out.close();
}
else{
// 结合ckeditor
// imageContextPath为图片在服务器地址
String imageContextPath="http://p.ananas.chaoxing.com/star3/origin/"+fileName+".png";
response.setContentType("text/html;charset=UTF-8");
String callback = request.getParameter("CKEditorFuncNum");
PrintWriter out = response.getWriter();
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + imageContextPath+ "',''" + ")");
out.println("</script>");
out.flush();
out.close();
}
}
/**
* 图片上传
*
* @Title upload
* @param request
*
* @return
* @throws IllegalStateException
* @throws IOException
*/
public static String upload(HttpServletRequest request, HttpServletResponse response) throws IllegalStateException,
IOException {
// 创建一个通用的多部分解析器
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
// 图片名称
String ret=null;
// 判断 request 是否有文件上传,即多部分请求
if (multipartResolver.isMultipart(request)) {
// 转换成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
// 取得request中的所有文件名
Iterator<String> iter = multiRequest.getFileNames();
while (iter.hasNext()) {
// 取得上传文件
MultipartFile file = multiRequest.getFile(iter.next());
if (file != null) {
// 取得当前上传文件的文件名称
String myFileName = file.getOriginalFilename();
if (myFileName.trim() != "") {
// 获得图片的原始名称
String originalFilename = file.getOriginalFilename();
// 获得图片后缀名称,如果后缀不为图片格式，则不上传
String suffix = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
if (!fileTypes.contains(suffix)) {
return null;
}
else{
ret=UploadFileUtil.upload(file.getOriginalFilename(), file.getBytes());
}
}
}
}
}
return ret;
}
f.实现效果