富文本使用之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,这里是 ...
随机推荐
- JqueryEasyUI EasyLoader
EasyLoader(简单加载) 对象的属性和方法: 使用: <script src="~/jquery-easyui-1.5.2/jquery.min.js">< ...
- [javaEE] jsp的九大隐式对象
pageContext对象: 1.可以作为入口对象获取其他八大隐式对象的引用 1.1 getEXception获取exception隐世对象 1.2 getPage获取page对象 1.3 getRe ...
- 在grid结果集中实现全选或全不选某些特定的行
在script的中的代码如下: function check(){ var id = gridgetselectvalue("require_id"); if(id.length& ...
- child_process
child_process const { spawn } = require('child_process'); const ls = spawn('ls', ['-lh', '/usr']); l ...
- static修饰java内部运行顺序
package com.demo01; public class Static extends demo{ /** * @param args */ private static String str ...
- Angular-ui/bootstarp modal 主控制器与模态框控制器传值
调用模态框: $scope.open = function (size) { //这里很关键,是打开模态框的过程 var modalInstance = $uibModal.open({ animat ...
- 139.00.007 Git学习-Cheat Sheet
@(139 - Environment Settings | 环境配置) Git虽然极其强大,命令繁多,但常用的就那么十来个,掌握好这十几个常用命令,你已经可以得心应手地使用Git了. 友情附赠国外网 ...
- 【Machine Learning】监督学习、非监督学习及强化学习对比
Supervised Learning Unsupervised Learning Reinforced Learning Goal: How to apply these methods How t ...
- 插入mysql语句报错：1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near
插入一个很简单的sql语句时候,mysql一直报错: [SQL] INSERT INTO ORDER ( id, activity_id, order_type, phone, order_amoun ...
- idea配置maven后提示 commond not found
1.昨天换公司笔记本安装idea后,配置完maven后,发现自己配置的 responsity 里面没有jar包,还是在默认的.m2文件夹里面,之后发现原来是 配置的setting.xml里面的目录 这 ...