公司有个文本编辑器用的是summernote。一开始没有上传图片及附件功能,以为是编辑器的问题,所以找到了CKEditor进行替换,后面才知道这是前人留下的坑(前人没有整合bootstrap+summernote,所以上传功能没有实现)
讲几个重要的点:
1、因为编辑器是嵌入在一个弹框中,所以需频繁初始化和销毁CKEditor(bootstrap弹框关闭开启、新增修改不同弹框情况)
// bootstrap 弹框关闭事件,销毁CKEditor实例 $('#formCategoryView').on('hide.bs.modal', function () { CKEDITOR.instances.content.destroy(); });
formCategoryView 是弹框ID
var ckeditor = CKEDITOR.replace('content',{ toolbar: 'Basic' });
新增和修改文章都是弹框而出,所以都需初始化。content是文本域的ID。
2、因编辑文章的弹框有选择时间的子弹框,使用起来会冒泡到父弹框,从而造成编辑器的混乱。
// 防止子元素展示关闭事件冒泡到父元素 $('.form-control').on('show', function(event) { event.stopPropagation(); }); $('.form-control').on('hide', function(event) { event.stopPropagation(); });
完美解决,form-control是时间控件的className。
3、图片上传的实现。需要在CKEditor的config.js添加以下代码
config.image_previewText=' ';config.filebrowserImageUploadUrl = 'requestMappingPath';
requestMappingPath就是你后台上传文件的接口。如果在path后加个?。那么编辑器可支持复制图片上传功能。
后台接口需返回定制格式
resultMap.put("uploaded", 1); resultMap.put("fileName", fileName); resultMap.put("url",imageContextPath);
url就是你把图片上传到服务器后的网络地址。
4、其实以上功能基本可以满足产品了,但产品人员提了一个可一键复制word文档的精彩绝伦(shangxinbingkuang)的需求。
踩过很多坑,想了几个方案:
4.1--监听复制事件,将文本传入后台,后台对img标签进行处理,后返回
4.2--制作CKEditor插件,增加导入word文档功能,传后台处理。
4.3--关闭图像上传功能,这样word复制到编辑器的图片会自动处理成base64数据
4.2需要学习制作CKEditor插件,官方全是英文文档。。。而且之前下过一个插件,没有配成功,所以放弃了。
4.3base64数据太长,直接存入数据库性能不好,而且用户端打开文章时间较长
排除了两个那就选第一个。可是中间又碰到一个大问题,引文word文档中的图片大部分是以file:///格式打头的,chrome因安全机制,不能直接加载本地文件(IE浏览器这回争了一口气)。这就形成了一个冲突,要么关闭图片上传功能,以base64数据传入后台,要么放弃新需求。产品人员暂时选择可以一键复制word。关键代码如下
// ckeditor监听复制后事件,获取文本内容,提交至后台,根据后台返回的处理过的内容,重新插入编辑器 ckeditor.on('instanceReady', function(e) { this.on('afterPaste', function(event) { var content = ckeditor.getData(); var param ={ content: content, }; $.ajax({ url: '', type: "POST", dataType: "json", cache: false, headers: { "Content-type": "application/json; charset=utf-8", }, data: JSON.stringify(param), success: function (result) { if (result.state == "success") { var newContent = result.data; var flag = ckeditor.setData(newContent); } } }); }); });
下面是后台代码
/** * Ckeditor编辑器直接复制word功能 * * @param params * @return */ @PostMapping(path = "") public Message convertContentForCkeditor(@RequestBody JSONObject params){ String content = params.getString("content"); String regEx_img = "<img.*src\\s*=\\s*(.*?)[^>]*?>"; Pattern p_image; Matcher m_image; List<String> pics = new ArrayList<String>(); p_image = Pattern.compile(regEx_img, Pattern.CASE_INSENSITIVE); m_image = p_image.matcher(content); String img = ""; while (m_image.find()) { img = img + "," + m_image.group(); // Matcher m = // Pattern.compile("src=\"?(.*?)(\"|>|\\s+)").matcher(img); //匹配src Matcher m = Pattern.compile("src\\s*=\\s*\"?(.*?)(\"|>|\\s+)").matcher(img); while (m.find()) { String reuslt = m.group(1); if (pics.contains(reuslt)){ continue; }else{ pics.add(reuslt); } } } if (pics.size() > 0){ for (String oldUrl : pics) { if (StringUtils.isEmpty(oldUrl)) continue; String baseCode = ""; MultipartFile multipartFile = null; if (oldUrl.startsWith("data:image")) { baseCode = oldUrl; multipartFile = this.base64ToMultipart(baseCode); } else if (oldUrl.startsWith("file:///")) { oldUrl = oldUrl.replace("file:///", ""); //java.io.File file = new java.io.File(oldUrl); try { baseCode = this.getImageStr(oldUrl); baseCode = "data:img/jpg;base64," + baseCode; multipartFile = this.base64ToMultipart(baseCode); } catch (Exception e) { e.printStackTrace(); } } else{ try { URL imgUrl = new URL(oldUrl); HttpURLConnection httpUrl = (HttpURLConnection) imgUrl.openConnection(); httpUrl.connect(); BufferedInputStream bis = new BufferedInputStream(httpUrl.getInputStream()); multipartFile = new MockMultipartFile("httpimg","","", bis); }catch(Exception e){ e.printStackTrace(); } } // 上传至服务器,获取url content = content.replace(oldUrl, newUrl); } } return Message.result(content); }
暂时就这样了,后面如还有优化,我会继续更新。