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'
- });
ckeditor富文本编辑器的使用和图片上传相关推荐
- ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传
项目开发需要用到在线编辑和图片上传,最终讨论使用ckeditor,原因就是其丰富的API.考虑到最新版本ckeditor5可能不够稳定,我们选择使用ckedtior4.9.2版本.官网链接:ckedi ...
- 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码
富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...
- wangEditor - 轻量级web富文本编辑器(可带图片上传)
业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...
- Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景 系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
- 富文本编辑器三种不同图片上传功能
最近在集成富文本和fastDFS文服做图片上传,找了写相关资料,感觉官网的比较全也比较杂.刚好看到一片 好的文章,然后我就转载并对不太详细的地方进行了一定的修改并新添加了一种前后端分离的方法.各位小伙 ...
- Spring Boot使用Simditor富文本编辑器,并将图片上传到七牛云。
开始之前,需要强调的是Simditor富文本编辑器是基于Jquery的.所以必须引入Jquery.Simditor下载地址 下载解压后会发现是整个simditor项目,很多东西项目根本不需要,只需要将 ...
- 微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...
- tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
- 使用 SpringBoot + Ckeditor 富文本编辑器、图片上传
一.前言 在一些页面中,进行 发表文章.评论等功能,都要涉及到富文本编辑器, 如 CSDN 的 markdown 编辑器 使用传统的 textarea 标签是远远满足不了需求的, 现在流行的富文本编辑 ...
最新文章
- python怎么发送代码文件_python 通过 socket 发送文件的实例代码
- Kubernetes v1.0特性解析
- crontab工具介绍
- python3 判断list是否包含另一个list
- python编程实例视屏-python 下载抖音视频示例源码
- asp.net(c#)两时间段每天是星期几,周几(时间段日历显示)的问题解
- 你还在抱怨开发工具,为什么不动手优化? | 人物志
- a form 出口享惠情况_关税聚焦 | 报关单“出口享惠情况”填报解读
- c语言入门这一篇就够了-学习笔记(一万字)
- NYOJ234吃土豆(双层动态规划)
- xxm系统-DB中勒索病毒
- JavaScript中函数的length属性
- mysql 分组去重只保留最新创建时间的数据
- 基于主从博弈的社区综合能源系统分布式协同优化运行策略(Matlab代码实现)
- 高级过程控制传热自动化实训装置
- 全新版大学进阶英语综合教程 第2册 课后习题答案
- android搜索框实现
- Cascader 级联选择器、Select 选择器和date-picker日期选择器的宽度设置
- BitLocker使用: 不重启,关闭已解锁加密驱动器。
- 2019浙大计算机初试经验帖
热门文章
- Error:1045, Access denied for user 'root'@'localhost' (using password: YES) (Phon3.6+Mysql8.1 )
- Xshell终端工具,使用backspace删除键终端显示为^H的解决方法
- Android实用技巧.动画效果(二)
- Django serializers.serialize 的使用
- python网络爬虫之农大绩点计算器
- tp-link wr 841n 300m 局域网限速的研究
- Praat脚本-025 | 轻松合并不同目录里的TextGrids
- css3的半透明效果
- DAGM2007数据集转换成VOC格式
- xp访问不了win10计算机,如何解决winxp访问win10共享打印机提示凭据不足