版本：ckeditor4
下载地址：https://ckeditor.com/ckeditor-4/download/
导入到项目中：
image.png
下面将简要讲述下用法：
1、html页面引用
<textarea class="form-item" name="content" id="content" rows="20" cols="80" style="height:800px;"></textarea>
<script src="${ctx}/plugins/ckeditor/ckeditor.js"></script>
2、JS代码
ckeditor本身有个通用配置文件：
image.png
具体可配置的选项可参考官方文档：https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
如果在使用ckeditor时，直接这样写：
CKEDITOR.replace('content');
就是所有配置应用默认配置，也可以自定义配置当作参数传入：
CKEDITOR.replace('content',
{
filebrowserImageUploadUrl : Fengunion.ctx+'/admin/fileController/uploadImgForCkeditor?type=12',
language : 'zh-cn',
image_previewText:'' ,
height: 800
}
);
当然我这里只作了一些简单的配置，可根据自己的需要对ckeditor功能进行个性化配置：
其中主要想讲解的就是ckeditor上传图片的配置：filebrowserImageUploadUrl ，这个填写上传图片的后台方法地址，实现效果如下图：
image.png
3、上传图片后台代码
controller：默认接收的图片参数名为upload
package com.fengunion.website.controller.admin;
import com.fengunion.website.common.constant.FileConstant;
import com.fengunion.website.common.response.ResultData;
import com.fengunion.website.common.utils.CkeditorUtils;
import com.fengunion.website.service.FileService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletResponse;
@Controller
@RequestMapping("/admin/fileController")
public class FileController {
@Autowired
FileService fileService;
@RequestMapping("/uploadFileCommon")
@ResponseBody
public ResultData uploadFileCommon(@RequestParam(name="type", required = false) Integer type, MultipartFile file){
String url = fileService.saveFile(FileConstant.FileTypeEnum.getFileType(type), file);
return ResultData.ok(url);
}
@RequestMapping("/uploadImgForCkeditor")
@ResponseBody
public void uploadImgForCkeditor(HttpServletResponse response, String CKEditorFuncNum,
MultipartFile upload, @RequestParam(name="type", required = false) Integer type){
String url = fileService.saveFile(FileConstant.FileTypeEnum.getFileType(type), upload);
CkeditorUtils.writeCkeditor(response, url, CKEditorFuncNum);
}
}
CkeditorUtils：
package com.fengunion.website.common.utils;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class CkeditorUtils {
public static void writeCkeditor(HttpServletResponse response, String url, String CKEditorFuncNum){
String result = "<script type=\"text/javascript\">";
result += "window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
+ ",'" + url + "','上传成功')";
result += "</script>";
try {
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(result);
} catch (IOException e) {
e.printStackTrace();
}
}
}
值得注意的是，上传图片的controller方法返回值是通过输出流的形式返回给ckeditor进行图片预览的，并且返回的格式统一为以下形式：
String result = "<script type=\"text/javascript\">";
result += "window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
+ ",'" + url + "','上传成功')";
result += "</script>";
然后再用输出流的方式写出去：
try {
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(result);
} catch (IOException e) {
e.printStackTrace();
}
保存文件方法：fileService.saveFile
package com.fengunion.website.service.impl;
import com.fengunion.website.common.constant.FileConstant;
import com.fengunion.website.common.response.CommonResponse;
import com.fengunion.website.common.utils.StringUtils;
import com.fengunion.website.exception.BizException;
import com.fengunion.website.service.FileService;
import org.apache.commons.io.FileUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.util.UUID;
@Service
public class FileServiceImpl implements FileService {
@Override
public String saveFile(String type, MultipartFile file) {
if(null == file && !file.isEmpty()){
BizException.newInstance(CommonResponse.FAILED, "上传文件失败，文件缺失！");
}
if(StringUtils.isBlank(type)){
type = FileConstant.COMMON_UPLOAD_PATH;
}
try {
String oldName = file.getOriginalFilename();
String prefix=oldName.substring(oldName.lastIndexOf(".")+1);
prefix = "."+prefix;
String newName = UUID.randomUUID().toString()+prefix;
// 文件保存路径
String filePath = FileConstant.getUploadPath() + File.separator + type;
File desFile = new File(filePath);
if(!desFile.exists()){
desFile.mkdirs();
}
filePath = filePath+ File.separator + newName;
// 转存文件
file.transferTo(new File(filePath));
return FileConstant.VIEW_PATH+ type + "/" + newName;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
文件上传定义的常量类：FileConstant
package com.fengunion.website.common.constant;
import com.fengunion.website.common.utils.StringUtils;
import org.springframework.beans.factory.annotation.Value;
import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;
public class FileConstant {
@Value("${file.backup.path}")
private static String basePath;
public static final String VIEW_PATH = "/upload/";
private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMdd";
public static final String COMMON_UPLOAD_PATH = "common";
/**
* 文件上传类型定义（用于上传时分子文件夹存储）
*/
public static enum FileTypeEnum{
TYPE_NEWS_PC(10, "news/pc"),
TYPE_NEWS_M(11, "news/m"),
TYPE_NEWS_CONTENT(12, "news/content"),
TYPE_BOTTOM(20, "bottom"),
TYPE_CAROUSEL_PC(30, "carousel/pc"),//轮播图电脑端
TYPE_CAROUSEL_M(31, "carousel/m"),//轮播图手机端
TYPE_BUTTON(40, "button"),//首页按钮图片
TYPE_ABOUT_PC(50, "about/pc"),
TYPE_ABOUT_M(51, "about/m"),
TYPE_ABOUT_CONTENT(52, "about/content");
private Integer code;
private String path;
FileTypeEnum(Integer code, String path){
this.code = code;
this.path = path;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getPath() {
return path;
}
public void setPath(String path) {
this.path = path;
}
public static String getFileType(Integer type){
if(StringUtils.isBlank(type)){
return COMMON_UPLOAD_PATH + "/" + getDateStr();
}
for(FileTypeEnum e:FileTypeEnum.values()){
if(type.equals(e.getCode())){
return e.getPath() + "/" + getDateStr();
}
}
return null;
}
}
public static String getDateStr(){
return new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO).format(new Date());
}
/**
* 获取图片存储绝对路径
* @return
*/
public static String getUploadPath(){
String os = System.getProperty("os.name");
if(os.toLowerCase().startsWith("win")){
return "C:\\\\fengunion\\website";
}else{
return basePath;
}
}
}
最终实现效果：
image.png
总结
以上是笔者对ckeditor使用的一些笔记，记录下来希望对读者有用，如有疑问欢迎与我沟通，相互学习，共同进步！
网友评论