ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传 |
您所在的位置:网站首页 › 截图的图片怎么复制到文本 › ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传 |
项目开发需要用到在线编辑和图片上传,最终讨论使用ckeditor,原因就是其丰富的API。考虑到最新版本ckeditor5可能不够稳定,我们选择使用ckedtior4.9.2版本。官网链接:ckeditor官网 特别注意:下面截图中url中的/editor/upload/1?其中的 /1 是根据自己需求添加不同类型数据上传时候的区分,可以去掉,写成/editor/upload? 初始化ckeditor 第一步:下载ckeditor并引入js; 第二步:在html页面引入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 reMap = new HashMap(); //必须返回这样格式的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' });
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |