|
注：使用CKEditor版本为js版本的CKEditor 4.8.0，所有配置均参考自CKEditor官方API：https://docs.ckeditor.com/，以及实践经验
一、快速使用
CKEditor官网下载js插件 进入官网https://ckeditor.com/ckeditor-4/download/点击Release notes选择4.8.0版本点击Download.Zip下载 备注：目前最新版本4.9.0有bug，所以用4.8.0版本  将下载的zip包解压后放入webapp下：  引入CKEditor的js文件
页面中使用CKEditor
描述：
window.onload = function()
{
CKEDITOR.replace( 'description');
};
具体示例：
window.onload = function()
{
CKEDITOR.replace( 'description');
};
招聘岗位：
招聘人数：
学历要求：
薪资：
联系人：
联系电话：
描述：
引入后效果如下： 
后台获取编辑器的值 后台通过获取textarea的值获取编辑器的值，springMVC取值如下：
@RequestMapping(value = "/add", method = RequestMethod.POST)
public Result add(Job job){......}
二、图片上传
清空图像预览框中的文字  ckeditor文件夹下的config.js中添加：
config.image_previewText=' ';
添加后效果如下： 
配置上传图片请求地址 ckeditor文件夹下的config.js中添加：
config.filebrowserUploadUrl="file/uploadImage";
上传照片预览 图片上传成功，在目录下也可以看到图片，至此图片上传成功。但是如何将图片发到编辑器中呢？点“确定”按钮会有以下提示。  到这里，要在controller中返回一段JS脚本：
out.println("");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",'" + this.request.getContextPath() + "/upload/" + fileInfo.getRename() + "','')");
out.println("");
有了这段代码，图片上传成功后，根据这里的 “upload/” + filename 相对地址，就可以使用这个图片，直接转到“图像”页面。  点击确定后编辑器如下： 
上传的图片重新显示到页面 直接将值写在标签中：
招聘岗位：
招聘人数：
学历要求：
薪资：
联系人：
联系电话：
描述：${job.description}
后台上传图片代码
/**
* 富文本编辑器图片上传
* @param file
* @return
*/
@RequestMapping(value = "/uploadImage", method = RequestMethod.POST)
public void uploadImage(@RequestParam("upload")MultipartFile[] file)
{
response.setCharacterEncoding("UTF-8");
PrintWriter out=null;
// CKEditor提交的很重要的一个参数 ,回调函数的序号
String callback = this.request.getParameter("CKEditorFuncNum");
try {
out = response.getWriter();
} catch (IOException e1) {
logger.error("response.getWriter()异常="+e1);
e1.printStackTrace();
}
FileInfo fileInfo = null;
//上传目录地址
String uploadDir = this.session.getServletContext().getRealPath("/") + "upload/";
//如果目录不存在，自动创建文件夹
File dir = new File(uploadDir);
if (!dir.exists())
{
dir.mkdir();
}
try
{
for (int i = 0; i < file.length; i++)
{
if (null != file[i])
{
fileInfo=executeUpload(uploadDir, file[i]);
fileInfo.setId(IdGen.uuid());
fileInfo.setCreateDt(DateUtil.getNowDate());
fileInfo.setCreateBy(this.getLoginUser().getId());
fileInfo.setUpdateBy(this.getLoginUser().getId());
fileInfo.setUpdateDt(this.getLoginUser().getId());
fileService.add(fileInfo);
// 返回"图像"选项卡并显示图片 request.getContextPath()为web项目名
out.println("");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",'" + this.request.getContextPath() + "/upload/" + fileInfo.getRename() + "','')");
out.println("");
}
}
}
catch (IOException e)
{
out.println("");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件上传失败！');");
out.println("");
}
}
三、难点总结
上传图片传到后台的参数CKEditorFuncNum为空
// CKEditor提交的很重要的一个参数 ,回调函数的序号
String callback = this.request.getParameter("CKEditorFuncNum");
将CKEditor版本由CKEditor 4.9.0换成CKEditor 4.8.0解决问题
上传图片传到后台的参数MultipartFile[]为空 添加参数注解@RequestParam(“upload”)后解决，代码如下：
public void uploadImage(@RequestParam("upload")MultipartFile[] file)
保存到数据库的编辑器的内容中的图片无法在页面显示 编辑器中的图片是上传到了应用服务器的/upload目录下，编辑器中关于图片的链接信息保存到了数据库中DESCRIPTION字段中，如下：  在页面上直接将值写在标签中：
招聘岗位：
招聘人数：
学历要求：
薪资：
联系人：
联系电话：
描述：${job.description}
|