ckeditor富文本编辑器的使用和图片上传，复制粘贴图片上传
项目开发需要用到在线编辑和图片上传，最终讨论使用ckeditor，原因就是其丰富的API。考虑到最新版本ckeditor5可能不够稳定，我们选择使用ckedtior4.9.2版本。官网链接：ckeditor官网
特别注意：下面截图中url中的/editor/upload/1?其中的 /1 是根据自己需求添加不同类型数据上传时候的区分，可以去掉，写成/editor/upload?
初始化ckeditor
第一步：下载ckeditor并引入js；
<script src="/plugins/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="/plugins/ckeditor/config.js" type="text/javascript"></script>
第二步：在html页面引入textarea标签；
<!-- 富文本编辑器 -->
<textarea name="content" id="editor"></textarea>
第三步：在js中初始化富文本编辑器；
//初始换编辑器
var editor = CKEDITOR.replace('editor', {
filebrowserImageUploadUrl :"/picture/editor/upload/1",
removePlugins:'elementspath,resize',
codeSnippet_theme: 'zenburn',
height:'600'
});
注意：其中‘editor’必须跟第二步引入的textarea便签的id一致。filebrowserImageUploadUrl 是用来配置图片上传的；
做完这三步，富文本编辑器就可以基本使用。
但是，如果 进行图片上传，我们需要将图片单独上传到我们制定的服务器，然后返回url存储到数据库，这样处理图片才是最合理的。下面我们来说说图片上传：
图片上传：
第一步：在初始化ckeditor是配置filebrowserImageUploadUrl 属性，属性对应的值就是图片上传的后台连接;
//初始换编辑器
var editor = CKEDITOR.replace('editor', {
filebrowserImageUploadUrl :"/picture/editor/upload/1",
removePlugins:'elementspath,resize',
codeSnippet_theme: 'zenburn',
height:'600'
});
第二步：配置config参数，在config.js中加入以下配置
/*将编辑器的语言设置为中文*/
config.language = 'zh-cn';
/*去掉图片预览框的文字*/
config.image_previewText = ' ';
/*开启工具栏“图像”中文件上传功能，后面的url为图片上传要指向的的action或servlet*/
config.filebrowserImageUploadUrl= "/blog/uploadEditorImage";
第三步：写后台上传图片代码：
注意：后台上传图片处理完，必须返回固定格式的json数据：
上传成功时，返回：
{ "uploaded":1, "url":"图片访问路径"}
上传失败时，返回
{"uploaded":0,"error":{"message":"失败原因" }}
@RequestMapping(value = "/editor/upload", method = RequestMethod.POST)
@ResponseBody
public String uploadPicture( @RequestParam("upload") MultipartFile file, Model model, HttpServletRequest request, HttpSession session, HttpServletResponse response) {
try {
//具体伤处图片操作都不易呀，省略
...... ......
//设置返回的图片url
String url = targetPath + "/" +fileName;
Map<String, String> reMap = new HashMap<String, String>();
//必须返回这样格式的json字符串
reMap.put("uploaded", "1");
reMap.put("url", url);
return JSON.toJSONString(reMap);
} catch (Exception e) {
logger.error("上传图片失败", e);
return "false";
}
}
第四步：进行上传图片操作：
跳转图像信息页面，点击确定即可
第五步：获取editor内容，提交富文本编辑器数据：
/* 获取editor中的内容 */
var content = editor.getData();
/* 设置editor中的内容 */
editor.setData(content);
将获取的数据放入表单标签，就可以提交数据了。数据格式是一堆html标签的字符串：
复制图片上传：
ckeditor是支持复制上传的，只需要在之前的js的filebrowserImageUploadUrl配置的上传路径最后加一个?就可以了，如下：
//初始换编辑器
var editor = CKEDITOR.replace('editor', {
filebrowserImageUploadUrl :"/picture/editor/upload/1?",
removePlugins:'elementspath,resize',
codeSnippet_theme: 'zenburn',
height:'600'
});
参考文章：http://blog.ncmem.com/wordpress/2023/11/02/ckeditor%e5%af%8c%e6%96%87%e6%9c%ac%e7%bc%96%e8%be%91%e5%99%a8%e7%9a%84%e4%bd%bf%e7%94%a8%e5%92%8c%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0%ef%bc%8c%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%9b%be%e7%89%87-3/
欢迎入群一起讨论
