CKEditor富文本编辑器+spring boot使用教程
2018-08-02 本文已影响0人
jessehua
因为在我的快速开发框架里需要增加内容发布相关的功能，所以需要使用富文本编辑器。比较了目前热门的一些富文本编辑器，最后选定了CKEditor4。CKEditor4的优点是功能强大、插件超多、文档详细、更新及时。
引入CKEditor4
在官网下载CKEditor4，下载地址 https://ckeditor.com/ckeditor-4/download/，我选择的是Full Package版本。
CKEditor4版本选择
html页面中引入CKEditor4
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<!-- 引入ckeditor.js文件 -->
<script src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
</textarea>
<script>
// 替换 <textarea id="editor1">为CKEditor实例
// 使用默认配置
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
在浏览器中打开，效果如下
CKEditor4默认配置
获取编辑器文本，使用getData方法
CKEDITOR.instances.editor1.getData()
设置编辑器初始文本，使用setData方法
CKEDITOR.instances.editor1.setData( '<p>This is the editor data.</p>' );
自定义CKEditor4工具栏
CKEditor的工具栏按钮可以根据需求灵活的隐藏、显示、分组、排序。
新建一个CKEditor的自定义配置文件editorConfig.js。
在下载的程序包里提供了自定义工具栏工具，目录是ckeditor\samples\toolbarconfigurator，在浏览器里打开index.html。
自定义工具栏工具
配置好后，点击Get toolbar config，把生成的配置内容复制到editorConfig.js配置文件里。
CKEDITOR.editorConfig = function (config) {
config.toolbarGroups = [
{name: 'document', groups: ['mode', 'document', 'doctools']},
{name: 'tools', groups: ['tools']},
{name: 'clipboard', groups: ['clipboard', 'undo']},
{name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing']},
{name: 'forms', groups: ['forms']},
{name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
{name: 'colors', groups: ['colors']},
{name: 'styles', groups: ['styles']},
{name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph']},
{name: 'others', groups: ['others']},
{name: 'about', groups: ['about']},
{name: 'links', groups: ['links']},
{name: 'insert', groups: ['insert']}
];
config.removeButtons = 'About,Save,NewPage,Preview,Print,Templates,Find,Replace,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Language,BidiRtl,BidiLtr,Flash,Iframe,PageBreak,SpecialChar,Smiley,Cut,Copy,Paste,PasteText,PasteFromWord,CopyFormatting,RemoveFormat,Anchor,Styles,Format,Font,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock';
};
在html页面里引入自定义配置文件。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<!-- 引入ckeditor.js文件 -->
<script src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
</textarea>
<script>
// 使用自定义配置
var editorConfig = {
customConfig: './samples/editorConfig.js'
};
CKEDITOR.replace( 'editor1', editorConfig);
</script>
</form>
</body>
</html>
在浏览器中打开，效果如下
自定义工具栏
自定义CKEditor4上传图片工具
CKEditor4默认的上传图片功能界面不够简洁，很繁重。
默认上传图片界面
需要替换为使用Enhanced Image Plugin插件。在 https://ckeditor.com/cke4/addon/image2 下载插件，解压到CKEditor程序包的plugins目录下。在editorConfig.js文件中增加如下配置：
config.extraPlugins = 'image2';
在浏览器中显示效果如下，默认只支持通过url发布图片。
Enhanced Image Plugin插件
需要添加本地图片上传功能。在editorConfig.js文件中增加如下配置：
// 服务器端上传图片接口URL
config.filebrowserImageUploadUrl='/cms/content/uploadImage';
在浏览器中显示效果如下
上传本地文件
editorConfig.js文件完整配置
// CKEDITOR配置文件
CKEDITOR.editorConfig = function (config) {
config.language = 'zh-cn';
config.height = 400;
config.extraPlugins = 'image2';
config.filebrowserImageUploadUrl='/cms/content/uploadImage';
config.toolbarGroups = [
{name: 'document', groups: ['mode', 'document', 'doctools']},
{name: 'tools', groups: ['tools']},
{name: 'clipboard', groups: ['clipboard', 'undo']},
{name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing']},
{name: 'forms', groups: ['forms']},
{name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
{name: 'colors', groups: ['colors']},
{name: 'styles', groups: ['styles']},
{name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph']},
{name: 'others', groups: ['others']},
{name: 'about', groups: ['about']},
{name: 'links', groups: ['links']},
{name: 'insert', groups: ['insert']}
];
config.removeButtons = 'About,Save,NewPage,Preview,Print,Templates,Find,Replace,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Language,BidiRtl,BidiLtr,Flash,Iframe,PageBreak,SpecialChar,Smiley,Cut,Copy,Paste,PasteText,PasteFromWord,CopyFormatting,RemoveFormat,Anchor,Styles,Format,Font,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock';
};
服务器端代码
上传图片接口需要返回如下约定的JSON字符串。
//上传成功结果示例
{
"uploaded": 1,
"fileName": "foo.jpg",
"url": "/files/foo.jpg"
}
//上传失败结果示例
{
"uploaded": 0,
"error": {
"message": "The file is too big."
}
}
上传图片接口响应模型定义如下：
public class UploadImageResModel {
/**
* 1成功，0失败
*/
private Integer uploaded;
private String fileName;
private String url;
public Integer getUploaded() {
return uploaded;
}
public void setUploaded(Integer uploaded) {
this.uploaded = uploaded;
}
public String getFileName() {
return fileName;
}
public void setFileName(String fileName) {
this.fileName = fileName;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}
假设上传图片的根目录是E:/upload/。需要把该目录做静态资源映射，映射到/upload/**路由下。新增配置文件：
@Component
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/upload/**")
.addResourceLocations("file:///E:/upload/");
super.addResourceHandlers(registry);
}
}
上传图片接口代码如下
@Controller
@RequestMapping("/cms/content")
public class ContentController {
private static final Logger logger = LoggerFactory.getLogger(ContentController.class);
@PostMapping("/uploadImage")
@ResponseBody
public UploadImageResModel uploadImage(@RequestParam("upload") MultipartFile multipartFile) {
UploadImageResModel res = new UploadImageResModel();
res.setUploaded(0);
if (multipartFile == null || multipartFile.isEmpty())
return res;
//生成新的文件名及存储位置
String fileName = multipartFile.getOriginalFilename();
String newFileName = UUID.randomUUID().toString()
.replaceAll("-", "")
.concat(fileName.substring(fileName.lastIndexOf(".")));
String fullPath = "E:/upload/".concat(newFileName);
try {
File target = new File(fullPath);
if (!target.getParentFile().exists()) { //判断文件父目录是否存在
target.getParentFile().mkdirs();
}
multipartFile.transferTo(target);
String imgUrl = "/upload/".concat(newFileName);
res.setUploaded(1);
res.setFileName(fileName);
res.setUrl(imgUrl);
return res;
} catch (IOException ex) {
logger.error("上传图片异常", ex);
}
return res;
}
}
最后，CKEditor除了支持浏览本地图片的方式上传图片，还支持把图片拖拽到编辑器方式以及从剪贴板粘贴方式上传图片。
