前言：由于工作需要，使用富文本，小刘将当时使用的是wangEditor并将当时的方法记录下来。内容涉及图片上传，如有不解或需要：请参考如下两篇关于上传图片的文章讲解；
springMVC图片上传，单图片上传和多图片上传以及预览
springMVC图片上传，单图片上传和多图片上传以及预览_小刘的博客-CSDN博客
Ajax实现单图片上传，多图片上传，以及和对象的综合上传
https://blog.csdn.net/qq_38310446/article/details/87623991
官网有详细描述，本文不再赘述：wangEditor - 轻量级 web 富文本编辑器
1. 富文本中使用base64位格式上传图片的方式
- 页面：
- 前端代码：
<style>
.news_content {
width: 800px;
height: auto;
margin: 0px auto;
border: 1px solid gainsboro;
padding: 0px;
}
td {
/* text-align: center;*/
vertical-align: middle !important;
border: 1px solid gainsboro;
height: 40px;
margin: 0px;
}
table {
width: 800px;
margin: 0px;
padding: 0px;
}
#editor_bottom {
text-align: right;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
/**
警告模态框
*/
.warnModal .modal-content {
width: 250px;
height: 250px;
margin:270px auto;
}
/**
* 模态框头的颜色
*/
.warnModal .modal-header {
height: 30%;
background: chocolate;
}
.warnModal .modal-header h4 {
/* margin-bottom: 20px;*/
font-size: 35px;
color: brown;
font-weight: bold;
text-align: center;
padding-bottom: 10px;
}
.warnModal .modal-body {
height: 75%;
width: 100%;
padding: 40px;
text-indent: 20px;
font-size: 20px;
color: gray;
font-weight: bold;
background: blanchedalmond;
}
td a:link{
color: goldenrod;
}
td a:visited{
color: grey;
}
td a:hover{
color: red;
}
td a:active{
color: #b2dba1;
}
.warnClass{
color: red;
}
.td_right{
text-align: right;
color: grey;
}
.news_content h1{
text-align: center;
color: grey;
margin: 10px;
}
.w-e-text-container {
height: 321px !important;
/*!important是重点，因为原div是行内样式设置的高度300px*/
}
</style>
</head>
<body>
<div class="news_content">
<h1>
添加新闻动态
</h1>
<form id="formNews" action="#" method="post" enctype="multipart/form-data">
<table class="table table-hover">
<tr>
<td class="td_right">
新闻标题
<span class="warnClass">*</span>
</td>
<td>
<input type="text" name="title" class="form-control" />
</td>
<td class="td_right">
新闻分类
<span class="warnClass">*</span>
</td>
<td width="160px">
<input type="text" name="category" class="form-control" />
</td>
</tr>
<tr>
<td class="td_right">
编写作者
<span class="warnClass">*</span>
</td>
<td>
<input type="text" name="author" class="form-control" />
</td>
<td class="td_right">
<a href="javascript:void(0)" id="selectNewsLogo">选择新闻Logo</a>
<span class="warnClass">*</span>
<input type="file" style="display: none" name="file" id="upimg" accept="image/*" onchange="upLoad()" />
</td>
<td>
<div class="newLogo">
<img src="../img/10.jpg" id="img" height="80px" width="80px" />
</div>
</td>
</tr>
</table>
<textarea id="getEditorContent" style="display: none" name="content"></textarea>
<div id="editor">
</div>
<div id="editor_bottom">
<input type="button" id="submitNew" value="提交系统" />
</div>
</form>
</div>
<div class="warnModal modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">
!警告!
</h4>
</div>
<div class="modal-body">
请将<span style="color: firebrick;">
必填
</span>信息<span style="color: gold;">填写完全</span>，否则将<span style="color: firebrick;">无法录入</span>系统！
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
<script type="text/javascript" src="/wangEditor-3.1.1/release/wangEditor.js"></script>
<script type="text/javascript">
$("#selectNewsLogo").click(function () {
$("#upimg").click();
});
var E = window.wangEditor;
var editor = new E('#editor')
// 自定义菜单配置
/***
* 不需要的可以删除
*/
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
editor.customConfig.onchange = function(html) {
// html 即变化之后的内容
$("#getEditorContent").html("");
$("#getEditorContent").html(html);
}
// editor.customConfig.showLinkImg = false // 隐藏“网络图片”tab
editor.customConfig.uploadImgShowBase64 = true; //开启本地图片上传
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
editor.customConfig.uploadImgMaxLength = 5
editor.create();
$("#submitNew").click(function () {
var c=checkForm();
if (c==false){
return;
}
$("#formNews").attr('action',"/admin/news/addNews");
$("#formNews").submit();
});
//单图片的预览问题
function upLoad() {
var fileInput = document.getElementById("upimg");
var file = fileInput.files[0];
//创建读取文件的对象
var reader = new FileReader();
//创建文件读取相关的变量
var imgFile;
//为文件读取成功设置事件
reader.onload = function(e) {
// alert('文件读取完成');
imgFile = e.target.result;
console.log(imgFile);
$("#img").attr('src', imgFile);
};
//正式读取文件
reader.readAsDataURL(file);
}
/**
* 表单校验
* @returns {boolean}
*/
function checkForm() {
var input_cart = document.getElementsByTagName("input");
for(var i = 0; i < input_cart.length; i++) {
if(input_cart[i].value == "" || input_cart[i].value == null) {
input_cart[i].focus();
toggleWarnModal();
setTimeout(toggleWarnModal,3000);
return(false);
}
}
}
function toggleWarnModal() {
$('#myModal').modal('toggle');
}
</script>特别注意：该富文本上传是采用base64格式来保存，没有上传到服务器；
实际上是获取富文本编辑器的内容，到隐藏的textarea中，提交表单，上传图片不再赘述，后台代码后面都差不多，form表单提交。简单的实现富文本，更多功能请参考官方文档。
上传后，直接在页面获取加载既可：
上传后页面：
2. 富文本中使用上传图片到服务器的方式
页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>
</head>
<body>
<div id="div1">
<p>欢迎使用 wangEditor 富文本编辑器</p>
</div>
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
// 配置服务器端地址
editor.customConfig.uploadImgServer = '/wangEditorUpload';
editor.customConfig.uploadFileName = 'file';
// 进行下文提到的其他配置
// ……
// ……
// ……
editor.create()
</script>
</body>
</html>特别注意：上传控件的指定和返回数据的格式：
其他配置参数请看官方文档，本文只做特殊的难点和基础功能实现。
- 后台控制层：
@RequestMapping(value = "/wangEditorUpload")
@ResponseBody
public Map<String,Object> wangEditorUpload( HttpServletRequest request,
@RequestParam("file") MultipartFile file) throws IOException {
boolean b = Utils.uploadOneFileLayui(request, file);
Map<String,Object>map=new HashMap<>();
if(b){
String o = (String) request.getSession().getAttribute("imageUploadUrl");
map.put("errno",0);
List<String>list=new ArrayList<>();
list.add(o);
map.put("data",list);
return map;
}
return null;
}页面效果：
获取内容：
对于wangEditor内容的设置和获取也比较简单。不再赘述；原理就是把富文本中的html代码赋值与一个隐藏的textarea
表单控件中，获取表单内容提交即可；
如有不解，请加java爱好群大家交流：852665736；群里都是热心好客的小伙伴，大家一同进步。
无偿免费分享源码以及技术和面试文档，更多优秀精致的源码技术栈分享请关注公众号：gh_817962068649
4861
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
