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文件中增加如下配置：
// 服务器端上传图片接口URLconfig.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/**路由下。新增配置文件：
@Componentpublic 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;
}
}
作者：jessehua
链接：https://www.jianshu.com/p/30912efe59ca
随时随地看视频
