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.wangEditor
var 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;
}
@Override
public String toString() {
return "WangEditor [errno=" + errno + ", data=" + Arrays.toString(data)
+ "]";
}
}
Controller
//图片上传
@RequestMapping(value = "/upload",method=RequestMethod.POST)
@ResponseBody
public 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。
注：
原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。
公众号回复“1”，拉你进程序员技术讨论群.
wangEditor - 轻量级web富文本编辑器（可带图片上传）的更多相关文章
- c#中富文本编辑器Simditor带图片上传的全部过程(项目不是mvc架构)
描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目不是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显 ...
- C#中富文本编辑器Simditor带图片上传的全部过程（MVC架构的项目）
描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显示 ...
- wangEditor富文本编辑器使用及图片上传
引入js文件 <script type="text/javascript" src="style/js/wangEditor.min.js">< ...
- Simditor 富文本编辑器多选图片上传、视频连接插入
simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firef ...
- 富文本编辑器TInyMCE,本地图片上传（Image Upload）
TinyMCE 官网 (类似:百度的富文本web编辑器UEditor) 第一步 下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js. 第二步 下载tinyMCE ...
- 富文本之BootStrap-wysiwyg 带图片上传功能
BootStrap-wysiwyg插件具有良好的编辑功能和展示效果. 一.使用方法在网上有很多,在此记录自己使用过程中的一些问题和解决方式. 相关依赖: bootstrap-wysiwyg.js (核 ...
- 重构wangEditor（web富文本编辑器），欢迎指正！
提示:最新版wangEditor请参见:wangEditor.github.io 或者 https://github.com/wangfupeng1988/wangEditor 1. 前言 (下载源码 ...
- 百度富文本编辑器整合fastdfs文件服务器上传
技术:springboot+maven+ueditor 概述 百度富文本整合fastdfs文件服务器上传 详细 代码下载:http://www.demodashi.com/demo/15008.h ...
- wangEditor——轻量级web富文本框
提示:最新版wangEditor请参见 http://www.wangeditor.com/ 和 https://github.com/wangfupeng1988/wangEditor 交流 ...
随机推荐
- vb.net版机房收费系统——教你七层架构（三）—外观模式
上次我们看到了D层是如何运作的,如今.我简单演示一下我的外观和B层是如何和U层和D层打交道的. 首先我跟大家说的是我的外观是依照界面功能划分的,粒度有点小,大家在做的时候,记得外观有几个即可了,可是不 ...
- hdu2236
链接:点击打开链接 题意:在一个n*n的矩阵中,找n个数使得这n个数都在不同的行和列里而且要求这n个数中的最大值和最小值的差值最小 代码: #include <iostream> #inc ...
- Java读取配置文件的方式
Java读取配置文件的方式-笔记 1 取当前启动文件夹下的配置文件 一般来讲启动java程序的时候.在启动的文件夹下会有配置文件 classLoader.getResource(&qu ...
- iOS 中client和server的 Web Service 网络通信 （1）
当你打开你手机上新浪微博应用或者知乎应用是.你是否会去想这些显示在手机上的图片和数据时从哪里来的?又是通过如何的方法实现的?好.那么接下来就介绍是如何实现的.过程又是怎么样的. 当我们浏览着 ...
- 图文介绍MyEclipse (2015) 中创建简单的Maven项目的步骤（用于生成可运行jar文件）
利用MyEclipse的引导,能够非常方便的创建简单的.用于生成可运行jar文件的Maven项目: (原创文章,转载请注明转自Clement-Xu的博客:http://blog.csdn.net/cl ...
- Dictionaries
A dictionary is like a list, but more general. In a list, the indices have to be integers; in a dict ...
- Lists and strings
A string is a sequence of characters and a list is a sequence of values, but a list of characters is ...
- Apache Bench测试
- 压力测试神器 Siege - Locust Web测压工具python开源 - 介绍: ab是apachebench命令的缩写. ab的原理:ab命令会创建多个并发访问线程,模拟多个访问者同时对某 ...
- Android属性动画-ValueAnimator和ObjectAnimator的高级用法
ValueAnimator的高级用法 在上篇文章中介绍补间动画缺点的时候有提到过,补间动画是只能对View对象进行动画操作的.而属性动画就不再受这个限制,它可以对任意对象进行动画操作.那么大家应该还记 ...
- Gson解析List的一点小问题
这阵子在使用gson解析时遇到了点小麻烦,因为一直用的fastjson,最近一个项目里使用的gson,需要解析list集合,查资料都是使用TypeToken解决,相对比较麻烦,下面为大伙推荐一种简便的 ...