富文本使用之wangEditor3
一、介绍：
wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。
二、使用方式：
- 直接下载：https://github.com/wangfupeng1988/wangEditor/releases
- 使用
npm下载：npm install wangeditor（注意wangeditor全部是小写字母） - 使用
bower下载：bower install wangEditor（前提保证电脑已安装了bower） - 使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js
三、使用：
重点是图片的上传和富文本内容的获取。
1.图片上传：
①存放在一个临时的文件夹里。
②将图片地址返给前台，富文本显示图片。
2.内容获取：
①获取富文本的内容，截取内容里的图片标签。
②将图片存入到一个新的文件夹里，替换图片的地址。
③将新的富文本的内容存储到数据库里。（这里我未作处理）
前台代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>富文本的使用</title>
<style type="text/css">
body {
width: 800px;
margin: 0 auto 0 auto;
}
</style>
</head>
<body> <!--wangEditor 使用 B-->
<div id="div1">
</div>
<!--wangEditor 使用 E-->
<button id="addBtn" onclick="addNews()">增加</button> </body>
<script type="text/javascript" src="../release/wangEditor.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
var httpurl = "http://localhost:8081"; //富文本使用
var E = window.wangEditor;
var editor = new E('#div1');
//重新设置富文本的内容
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'italic', // 斜体
'underline', // 下划线
'foreColor', // 文字颜色
'link', // 插入链接
'justify', // 对齐方式
'image', // 插入图片
'undo', // 撤销
'redo' // 重复
];
// 隐藏“网络图片”tab
editor.customConfig.showLinkImg = false;
// 将图片大小限制为 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
// 限制一次最多上传 1 张图片
editor.customConfig.uploadImgMaxLength = 1;
//开启wangEditor的错误提示
editor.customConfig.debug=true;
// 关闭粘贴样式的过滤
editor.customConfig.pasteFilterStyle = false;
// 忽略粘贴内容中的图片
editor.customConfig.pasteIgnoreImg = true; //上传图片 将图片以文件的形式传给后台进行操作返回图片 url
editor.customConfig.customUploadImg = function (files, insert) {
var date = new FormData();
date.append("file", files[0]);
$.ajax({
type: "POST",
url: httpurl + "/test/upload",
data: date,
dataType: 'json',
async: false,
cache: false,
contentType: false,
processData: false,
success: function (result) {
insert(result.data);// insert 是获取图片 url 后，插入到编辑器的方法
}
})
};
editor.create();//创建富文本 /**
* 添加企业新闻
*/
function addNews() {
var formData = new FormData();
formData.append("news",editor.txt.html());
$.ajax({
type: "POST",
url: httpurl + "/test/addNews",
data: formData,
dataType: 'json',
async: false,
cache: false,
contentType: false,
processData: false,
success: function (result) {
console.log(result);
}
})
}
</script>
</html>
后台代码：
/**
* 图片上传
* @param request
* @param file
* @return
*/
public JSONObject upload(HttpServletRequest request,MultipartFile file) {
JSONObject imgPathObject = new JSONObject();
Map map = new HashMap();
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
List<FileItem> list = null ;
if(isMultipart){
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8"); try { //获取文件名（带后缀名）
String fileName = file.getOriginalFilename();
String suffixName = fileName.substring(fileName.lastIndexOf("."));
//企业新闻id
String entNewsImgId = UUIDUtil.getOneUUID();
fileName = entNewsImgId + suffixName; //获取文件输入流
InputStream input = file.getInputStream(); // 获取当前时间
String format = DateUtil.DEF_DATE_FORMAT_STR;
String strDate = DateUtil.dateToString(new Date(),format);
String StrDateTime = strDate.substring(0, 10); //获取工程路径
String serverAddress = request.getServletContext().getRealPath("/");
String entNewsImgPath = serverAddress +"tempRes/busiPic/" + StrDateTime +"/" + fileName;
int result = writeToLocal(entNewsImgPath, input);
String imgPath = "http://localhost:8081/tempRes/busiPic/" + StrDateTime +"/" + fileName;
if(result == 1) {
map.put("data", imgPath);
String entNewsStr = JSONObject.toJSONString(map);
imgPathObject = JSONObject.parseObject(entNewsStr); }
} catch (Exception e) {
// TODO: handle exception
}
} return imgPathObject;
} /**
* 将InputStream写入本地文件
* @param filePath 写入本地目录
* @param input 输入流
* @throws IOException
*/
private static int writeToLocal(String filePath, InputStream input) {
//定义每次读取的长度
int index = -1;
//定义每次读取字节的大小与保存字节的数据
byte[] bytes = new byte[1024];
FileOutputStream downloadFile;
try {
//保证创建一个新文件
File file = new File(filePath);
if (!file.getParentFile().exists()) { // 如果父目录不存在，创建父目录
file.getParentFile().mkdirs();
}
file.createNewFile(); downloadFile = new FileOutputStream(filePath);
while ((index = input.read(bytes)) != -1) {
downloadFile.write(bytes, 0, index);
downloadFile.flush();
}
downloadFile.close();
input.close(); } catch (FileNotFoundException e) {
e.printStackTrace();
return 0;
} catch (IOException e) {
e.printStackTrace();
return 0;
}
return 1;
} /**
* 获取富文本内容
* @param request
* @param file
* @return
*/
public JSONObject addNews(HttpServletRequest request, MultipartFile file) {
Map map = new HashMap();
//新闻的UUID
String entNewsId = UUIDUtil.getOneUUID();
String newsCon = "";//新的新闻内容
String newsImgPath = "";//新闻图片路径
String newsContent = request.getParameter("news");//获取新闻内容
System.out.println(newsContent);
//截取图片路径
String tempSrc= "<img src=\"";
String[] imgStr = newsContent.split(tempSrc);
String[] imgPathStr = new String[imgStr.length];//图片路径数组
System.out.println(imgStr.length);
if(imgStr.length > 1) {
String[] imgLengthStr = imgStr[1].split("\"");
int imgLength = imgLengthStr[0].length(); for (int i=1; i< imgStr.length; i++) {
newsImgPath = imgStr[i].substring(0,imgLength);
System.out.println(newsImgPath);
//改变图片路径
String tempPort = "8081/";
String tempImgPath = request.getServletContext().getRealPath("/") + newsImgPath.split(tempPort)[1];
String tempImgUUID = newsImgPath.substring(newsImgPath.lastIndexOf("/")+1);
System.out.println(tempImgPath);
String imgPathNewAbove = request.getServletContext().getRealPath("/");
String imgPathNewBehind ="busiPic/entNewsPic/"+ entNewsId +"/pic_" + tempImgUUID;
String imgPathNew = imgPathNewAbove + imgPathNewBehind;
File oldFile = new File(tempImgPath);
File newFile = new File(imgPathNew);
Boolean bln = copyFile(oldFile,newFile);
if(bln)
imgPathStr[i-1] = newsImgPath.split(tempPort)[0] + tempPort + imgPathNewBehind;
} newsCon = imgStr[0];
for (int i=1; i< imgStr.length; i++) {
newsCon += tempSrc + imgPathStr[i-1] + imgStr[i].substring(imgLength);
}
System.out.print(newsCon);
map.put("newsContent",newsCon); }else {
map.put("newsContent",newsContent);
}
String newContentStr = JSONObject.toJSONString(map);
JSONObject result = JSONObject.parseObject(newContentStr);
return result;
} /**
* 复制文件
* @param source
* @param dest
* @throws IOException
*/
public static boolean copyFile(File source, File dest){ //保证创建一个新文件
if (!dest.getParentFile().exists()) { // 如果父目录不存在，创建父目录
dest.getParentFile().mkdirs();
}
if (dest.exists()) { // 如果已存在,删除旧文件
dest.delete();
}
InputStream input = null;
OutputStream output = null;
try {
dest.createNewFile();//创建文件
input = new FileInputStream(source);
output = new FileOutputStream(dest);
byte[] buf = new byte[1024];
int bytesRead;
while ((bytesRead = input.read(buf))>-1) {
output.write(buf, 0, bytesRead);
}
output.close();
input.close();
}catch (IOException e) {
e.printStackTrace();
}catch(Exception e){
e.printStackTrace();
return false;
}
return true;
}
样式如图：
富文本使用之wangEditor3的更多相关文章
- 是时候选择一款富文本编辑器了（wangEditor）
需要一款富文本编辑器,当然不能自己造轮子.本来想使用cnblog也在用的TinyMCE,名气大,功能全.但是发现TinyMCE从4.0开始,不再支持直接下载.所以还是决定选用wangEditor.遗憾 ...
- 基于jeesite的cms系统（五）：wangEditor富文本编辑器
一.关于wangEditor: wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.ka ...
- wangEditor-基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费(2)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 富文本编辑器、日期选择器、软件天堂、防止XSS攻击、字体icon、转pdf
[超好用的日期选择器] Layui:http://www.layui.com/laydate/ 备注:日期选择器,用过很多很多,自己也写过一些:相信这个简单而又不简单的选择器,能够给你多些美好的时光 ...
- wangEditor - 轻量级web富文本编辑器（可带图片上传）
业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...
- 富文本编辑器(wangEditor)
近期在产品的开发工作中遇到要使用富文本编辑器的地方.于是对比了几款编辑器, 最后选择了wangEditor. 优点:轻量.简洁.界面美观.文档齐全. 缺点: 相较于百度ueditor等编辑器功能较 ...
- 富文本编辑器--引入demo和简单使用
wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.kancloud.cn/wangfu ...
- web轻量级富文本框编辑
前言 主要介绍squire,wangeditor富文本编辑 以及用原生js 如何实现多个关键字标识 需求 如何标记多个关键字,取消关键字 第一种方法 原生 textarea 标记 准备资料参考:张鑫旭 ...
- 富文本编辑器Simditor的简易使用
最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是 ...
随机推荐
- C#基础知识-使用XML完成一个小程序（十一）
上一篇中讲到XML基本的结构,还有增删改查的方法,这一篇中我们就来利用XML来完成一个简单的订单系统,主要是实现一个简单学生名单的增删改查,如果想要应用到实际的环境中建议考虑数据量的问题,如果数据量大 ...
- javaEE Design Patter(1)初步了解23种常用设计模式
设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接模式.组合模式.享元模式. ...
- thinkphp下mysql用用户名或者手机号登录
$res=$user->where("login_id='{$username}' OR phone='{$username}'")->find(); $phone=I ...
- ubuntu 16.10安装nginx
1 : cd /usr/local 2 : sudo wget http://nginx.org/download/nginx-1.2.8.tar.gz 3 : sudo tar -zxvf ngin ...
- JavaScript实现邮箱后缀提示功能
先来个基础的 需求 根据下面需求实现如示意图所示的邮箱输入提示功能,注意,根据要求只需实现下面功能 当用户没有任何输入时,提示框消失 当用户输入字符后,显示提示框,并且把用户输入的内容自动拼上邮箱后缀 ...
- 终止ajax请求
在做搜索功能时,文本框输入文本就得请求一次数据,如果上一次的请求还没回又请求了就导致数据错误和无用的数据请求. 我们需要输入文本时候判断上一次的ajax请求是否完毕,若还没完毕就终止本次请求. 对于j ...
- JSON对象的两个方法
JSON对象有两个方法,stringify()和parse(). 最简单的方法,这两个方法分别用于吧JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript值. ...
- eclipse遇到的异常
1. Widget disposed too early for part com.kompakar.ehealth.ui.emr.mstr.medicaldocumentaudit.Medical ...
- JavaEE中表现层、持久层、业务层的职责分析（转载）
表现层.持久层.业务层 注:本文转载于:http://www.blogjava.net/jiabao/archive/2007/04/08/109189.html 为了实现web层(struts)和持 ...
- hive配置参数的说明：
hive.ddl.output.format:hive的ddl语句的输出格式,默认是text,纯文本,还有json格式,这个是0.90以后才出的新配置: hive.exec.script.wrappe ...