wangEditor - 轻量级web富文本编辑器（可带图片上传）

业务需求：

通过后台编辑文章和图片，上传到前端界面，展示新闻消息模块。这个时候，需要一款简洁的编辑器，百度编辑器是最常用的一种，但是功能太过于复杂，而wangEditor - 轻量级web富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器，值得拥有。

wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。

官网：www.wangEditor.com
文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
源码：github.com/wangfupeng1988/wangEditor

使用示例：

前端代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.toolbar {border: 1px solid #ccc;width: 800px;}.text {border: 1px solid #ccc;height: 400px;width: 800px;}</style></head><body><div id="div1" class="toolbar"></div><div style="padding: 5px 0; color: #ccc"></div><div id="div2" class="text"><p>请在此输入内容</p></div></body><script src="http://code.jquery.com/jquery-1.8.0.min.js"></script><script type="text/javascript" src="release/wangEditor.min.js"></script><script>var E = window.wangEditorvar editor = new E('#div1', '#div2') // 两个参数也可以传入 elem 对象，class 选择器//开启debug模式editor.customConfig.debug = true;// 关闭粘贴内容中的样式editor.customConfig.pasteFilterStyle = false// 忽略粘贴内容中的图片editor.customConfig.pasteIgnoreImg = true// 使用 base64 保存图片//editor.customConfig.uploadImgShowBase64 = true// 上传图片到服务器editor.customConfig.uploadFileName = 'myFile'; //设置文件上传的参数名称editor.customConfig.uploadImgServer = 'upload.do'; //设置上传文件的服务器路径editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M//自定义上传图片事件editor.customConfig.uploadImgHooks = {before: function(xhr, editor, files) {},success: function(xhr, editor, result) {console.log("上传成功");},fail: function(xhr, editor, result) {console.log("上传失败,原因是" + result);},error: function(xhr, editor) {console.log("上传出错");},timeout: function(xhr, editor) {console.log("上传超时");}}editor.create()</script></html>

服务器代码

导入依赖：

<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version>
</dependency>

pojo：

import java.util.Arrays;public class WangEditor {private Integer errno; //错误代码，0 表示没有错误。private String[] data; //已上传的图片路径public WangEditor() {super();}public WangEditor(String[] data) {super();this.errno = 0;this.data = data;}public Integer getErrno() {return errno;}public void setErrno(Integer errno) {this.errno = errno;}public String[] getData() {return data;}public void setData(String[] data) {this.data = data;}@Overridepublic String toString() {return "WangEditor [errno=" + errno + ", data=" + Arrays.toString(data)+ "]";}}

Controller

//图片上传@RequestMapping(value = "/upload",method=RequestMethod.POST)@ResponseBodypublic WangEditor uploadFile(@RequestParam("myFile") MultipartFile multipartFile,HttpServletRequest request) {try {// 获取项目路径String realPath = request.getSession().getServletContext().getRealPath("");InputStream inputStream = multipartFile.getInputStream();String contextPath = request.getContextPath();// 服务器根目录的路径String path = realPath.replace(contextPath.substring(1), "");// 根目录下新建文件夹upload，存放上传图片String uploadPath = path + "upload";// 获取文件名称String filename = MoteUtils.getFileName();// 将文件上传的服务器根目录下的upload文件夹File file = new File(uploadPath, filename);FileUtils.copyInputStreamToFile(inputStream, file);// 返回图片访问路径String url = request.getScheme() + "://" + request.getServerName()+ ":" + request.getServerPort() + "/upload/" + filename;String [] str = {url};WangEditor we = new WangEditor(str);return we;} catch (IOException e) {log.error("上传文件失败", e);}return null;}

效果如下所示：

就是这么的简单方便，三分钟即可上手使用，在众多的富文本编辑器中，尤其是带图片上传的需求，这款真是当之无愧的存在，简单轻便soeasy。

注：

关注「编程微刊」公众号，在微信后台回复「领取资源」，获取IT资源300G干货大全。公众号回复“1”，拉你进程序员技术讨论群。

转载于:https://www.cnblogs.com/ting6/p/9725383.html

wangEditor - 轻量级web富文本编辑器（可带图片上传）相关推荐

如何部署JSP版本的百度富文本编辑器（带图片上传功能）
博主之前因为公司项目需要部署百度的富文本编辑器到项目中,由于之前一直是后端开发,所以部署上还是费了一番心思的,网上也有很多教程但是用起来总会有各种问题,今天在这里记录一下以备今后的不时之需,也希望帮助 ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
Spring Boot集成Ueditor富文本编辑器，实现图片上传，视频上传，返回内容功能并且通过OSS转换为链接并且解决Spring Security静态资源访问以及跨域问题
学习自https://cloud.tencent.com/developer/article/1452451 现在是晚上22点,刚刚和我们的前端交流完了富文本编辑器的一些意见和看法还是老样子需求 ...
Simditor 富文本编辑器多选图片上传、视频连接插入
simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firef ...
themyleaf 图片上传_springboot thymeleaf 整合百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
富文本编辑器quill-editor自定义图片上传
目录 1.页面引入 2.自定义imge处理的图片上传组件 3.图片上传成功后回显嵌入 4.最终呈现效果 5.源码之前我整理过一篇文章,Quill编辑器实现图片上传功能(戳链接可查看) 但是想来那个是 ...
quill富文本编辑器quill粘贴图片上传服务器
强大的富文本编辑器:quill github:32k start++,:https://github.com/quilljs/quill quill粘贴图片上传服务器 <link href=&q ...
百度富文本编辑器，改变图片上传存储路径
我用的是最新版! 找到以下2个关键文件: YourPath.../Ueditor/php/config.json YourPath.../Ueditor/php/Uploader.class.php ...
富文本_轻量级 web 富文本编辑器 —— wangEditor
介绍 wangEditor -- 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.kancloud.cn/wan ...

wangEditor - 轻量级web富文本编辑器（可带图片上传）

wangEditor - 轻量级web富文本编辑器（可带图片上传）相关推荐

最新文章

热门文章