SpringBoot集成富文本编辑器CKeditor

1.pom.xml文件引入文件上传依赖

<!--io常用工具类 -->
		<dependency>
			<groupId>commons-io</groupId>
			<artifactId>commons-io</artifactId>
			<version>2.5</version>
		</dependency>

		<!--文件上传工具类 -->
		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.3</version>
		</dependency>

2.application.yml配置文件上传路径信息

project:
  name: SpringBoot-DEMO
  version: 1.0
  filepath: /democxy2.0/
  basepath: C:/uploads

3.新建一个配置类ProjectConfig.java读取yml文件的配置信息

import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

/**
 * 项目基础信息配置类（获取配置文件application.yml的属性值）
 * @author democxy
 *
 */
@Component
@ConfigurationProperties(prefix = "project")
public class ProjectConfig {
	
	private String name;
	
	private String version;
	
	private String filepath;
	
	private String basepath;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getVersion() {
		return version;
	}

	public void setVersion(String version) {
		this.version = version;
	}

	public String getFilepath() {
		return filepath;
	}

	public void setFilepath(String filepath) {
		this.filepath = filepath;
	}

	public String getBasepath() {
		return basepath;
	}

	public void setBasepath(String basepath) {
		this.basepath = basepath;
	}
	

}

4.下载ckeditor文件放到项目下

https://ckeditor.com/ 官方
进入下载 https://ckeditor.com/download

5.新建文件上传控制类UploadController.java处理文件上传请求

import java.io.File;
import java.util.HashMap;
import java.util.Map;

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 com.democxy.common.config.ProjectConfig;
import com.democxy.common.utils.IdGenUtil;

@Controller
@RequestMapping("/upload")
public class UploadController {
	
	@Autowired
	ProjectConfig projectConfig;
	
	
	/**
	 * 上传图片
	 * @param file
	 * @return
	 */
	@ResponseBody
	@RequestMapping("/ckeditorUpload")
	public Map<String, Object> ckeditorUpload(@RequestParam("upload")MultipartFile file,String CKEditorFuncNum)throws Exception{
	    // 获取文件名
	    String fileName = file.getOriginalFilename();
	    // 获取文件的后缀名
	    String suffixName = fileName.substring(fileName.lastIndexOf("."));
	    String newFileName=IdGenUtil.getRandomNumr()+suffixName;
	    //根据配置文件获取上传的基路径
	    String filePath = projectConfig.getBasepath()+ projectConfig.getFilepath()+newFileName;
	    //文件真实上传路径filePath  保存数据库的路径为projectConfig.getFilepath()+newFileName
	    File dest = new File(filePath);
		if (!dest.getParentFile().exists()) { // 判断文件父目录是否存在
			dest.getParentFile().mkdirs();
		}
		// 保存文件
		file.transferTo(dest); 
		//响应ckeditor对应的格式
		//这是低版本的数据格式 4.7以下
//	    StringBuffer sb=new StringBuffer();
//	    sb.append("<script type=\"text/javascript\">");
//	    sb.append("window.parent.CKEDITOR.tools.callFunction("+ CKEditorFuncNum + ",'" +filePath + "','')");
//	    sb.append("</script>");
	    //这是高版本的数据格式 4.14 demo用的版本是4.14
	    Map<String, Object> map = new HashMap<String, Object>();
	    map.put("uploaded", 1);
	    map.put("fileName", newFileName);
	    map.put("url", projectConfig.getFilepath()+newFileName);
	    
	    return map;
	}

}

6.修改/static/ckeditor/config.js文件内容

/**
 * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	// 上传图片路径
    config.filebrowserImageUploadUrl = "/upload/ckeditorUpload";
    
    
    config.toolbar = 'Basic';
    
    config.toolbar_Full =
    [
        { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
        { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
        { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
        { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 
            'HiddenField' ] },
        '/',
        { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
        { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
        '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
        { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
        { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
        '/',
        { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
        { name: 'colors', items : [ 'TextColor','BGColor' ] },
        { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
    ];
     
    config.toolbar_Basic =
    [
        ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About','Image']
    ]; 
};

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- 确保引入的js文件路径正确 -->
<script src="ckeditor/ckeditor.js"></script>
</meta>
</head>
<body>
    <form>
       <textarea name="myEdit" id="myEdit" rows="200" cols="80"> Hellow CKEditor </textarea>
       <script>
            <!-- Replace the <textarea id="myEdit"> with a CKEditor -->
             CKEDITOR.replace( 'myEdit',{
            	 "toolbar":"Full",
            	  "height": 500
             } );
        </script>
    </form>
</body>
</html>

备注：toolbar自定义标签含义表

Source = 源码模式
Save = 保存(提交表单)
NewPage = 新建
Preview = 预览
- = 分割线
Templates = 模板
Cut = 剪切
Copy = 复制
Paste = 粘贴
PasteText = 粘贴为无格式文本
PasteFromWord = 从 MS WORD 粘贴
-
Print = 打印
SpellChecker = 拼写检查
Scayt = 即时拼写检查
Undo = 撤销
Redo = 重做
-
Find = 查找
Replace = 替换
-
SelectAll = 全选
RemoveFormat = 清除格式
Form = 表单
Checkbox = 复选框
Radio = 单选框
TextField = 单行文本
Textarea = 多行文本
Select = 列表/菜单
Button = 按钮
ImageButton = 图片按钮
HiddenField = 隐藏域
/
Bold = 加粗
Italic = 倾斜
Underline = 下划线
Strike = 删除线
-
Subscript = 下标
Superscript = 上标
NumberedList = 编号列表
BulletedList = 项目列表
-
Outdent = 减少缩进量
Indent = 增加缩进量
Blockquote = 块引用
CreateDiv = 创建DIV容器
JustifyLeft = 左对齐
JustifyCenter = 居中
JustifyRight = 右对齐
JustifyBlock = 两端对齐
BidiLtr = 文字方向从左到右
BidiRtl = 文字方向从右到左
Link = 插入/编辑超链接(上传文件)
Unlink = 取消超链接
Anchor = 插入/编辑锚点链接
Image = 图像(上传)
Flash = 动画(上传)
Table = 表格
HorizontalRule = 插入水平线
Smiley = 插入表情
SpecialChar = 插入特殊符号
PageBreak = 插入分页符
/
Styles = 样式快捷方式
Format = 文本格式
Font = 字体
FontSize = 文字大小
TextColor = 文字颜色
BGColor = 背景颜色
Maximize = 全屏编辑模式
ShowBlocks = 显示区块
-
About = 显示关于