一、介绍：
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;
}
样式如图：
原文地址：https://www.cnblogs.com/nananana/p/9025605.html
时间： 2024-08-02 12:55:54