CKEditor

注：使用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文件
<script src="ckeditor/ckeditor.js"></script>
1
页面中使用CKEditor

描述：<textarea name="description" id="description"/></textarea>

<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'description');
};
</script>
1
2
3
4
5
6
7
8
9
具体示例：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'description');
};
</script>
</head>
<body>
<form method="post" action="job/add">
招聘岗位：<input type="text" name="position" id="position"/>
招聘人数：<input type="text" name="quantity" id="quantity"/>
学历要求：<input type="text" name="education" id="education"/>
薪资：<input type="text" name="salary" id="salary"/>
联系人：<input type="text" name="contact" id="contact"/>
联系电话：<input type="text" name="telephone" id="telephone"/>
描述：<textarea name="description" id="description"/></textarea>
<input type="submit"/>
</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
引入后效果如下：

后台获取编辑器的值
后台通过获取textarea的值获取编辑器的值，springMVC取值如下：
@RequestMapping(value = "/add", method = RequestMethod.POST)
public Result add(Job job){......}
1
2
3
二、图片上传
清空图像预览框中的文字

ckeditor文件夹下的config.js中添加：

config.image_previewText=' ';
1
添加后效果如下：

配置上传图片请求地址
ckeditor文件夹下的config.js中添加：
config.filebrowserUploadUrl="file/uploadImage";
1
上传照片预览
图片上传成功，在目录下也可以看到图片，至此图片上传成功。但是如何将图片发到编辑器中呢？点“确定”按钮会有以下提示。

到这里，要在controller中返回一段JS脚本：
out.println("<script type="text/javascript">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",'" + this.request.getContextPath() + "/upload/" + fileInfo.getRename() + "','')");
out.println("</script>");
1
2
3
4
有了这段代码，图片上传成功后，根据这里的
“upload/” + filename
相对地址，就可以使用这个图片，直接转到“图像”页面。

点击确定后编辑器如下：

上传的图片重新显示到页面
直接将值写在标签中：
<form method="post" action="job/add">
招聘岗位：<input type="text" name="position" id="position" value='${job.position}'/>
招聘人数：<input type="text" name="quantity" id="quantity" value='${job.quantity}' />
学历要求：<input type="text" name="education" id="education" value='${job.education}'/>
薪资：<input type="text" name="salary" id="salary" value='${job.salary}'/>
联系人：<input type="text" name="contact" id="contact" value='${job.contact}'/>
联系电话：<input type="text" name="telephone" id="telephone" value='${job.telephone}'/>
描述：<textarea name="description" id="description"/>${job.description}</textarea>
<input type="submit"/>
</form>
1
2
3
4
5
6
7
8
9
10
后台上传图片代码
/**
* 富文本编辑器图片上传
* @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("<script type="text/javascript">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",'" + this.request.getContextPath() + "/upload/" + fileInfo.getRename() + "','')");
out.println("</script>");

}
}
}
catch (IOException e)
{
out.println("<script type="text/javascript">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件上传失败！');");
out.println("</script>");
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
三、难点总结
上传图片传到后台的参数CKEditorFuncNum为空
// CKEditor提交的很重要的一个参数 ,回调函数的序号
String callback = this.request.getParameter("CKEditorFuncNum");
1
2
将CKEditor版本由CKEditor 4.9.0换成CKEditor 4.8.0解决问题

上传图片传到后台的参数MultipartFile[]为空
添加参数注解@RequestParam(“upload”)后解决，代码如下：
public void uploadImage(@RequestParam("upload")MultipartFile[] file)
1
保存到数据库的编辑器的内容中的图片无法在页面显示
编辑器中的图片是上传到了应用服务器的/upload目录下，编辑器中关于图片的链接信息保存到了数据库中DESCRIPTION字段中，如下：

在页面上直接将值写在标签中：
<form method="post" action="job/add">
招聘岗位：<input type="text" name="position" id="position" value='${job.position}'/>
招聘人数：<input type="text" name="quantity" id="quantity" value='${job.quantity}' />
学历要求：<input type="text" name="education" id="education" value='${job.education}'/>
薪资：<input type="text" name="salary" id="salary" value='${job.salary}'/>
联系人：<input type="text" name="contact" id="contact" value='${job.contact}'/>
联系电话：<input type="text" name="telephone" id="telephone" value='${job.telephone}'/>
描述：<textarea name="description" id="description"/>${job.description}</textarea>
<input type="submit"/>

————————————————
版权声明：本文为CSDN博主「sinat_31986807」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sinat_31986807/article/details/79667543