wangedito 富文本编辑器的使用还是很简单的 官方文档已经很清楚的写清楚了 有需要的可以到官方网站查阅文档 这里只是记录自己写的项目
效果图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="/css/table.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="/css/manager/frame_sys.css">
<link rel="stylesheet" type="text/css" href="/css/manager/layui.css">
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/layui/layui.all.js"></script>
<script type="text/javascript" src="/js/wangEditor.min.js"></script>
<script src="/js/manager/ueditor.config.js"></script>
<script src="/js/manager/ueditor.all.min.js"></script>
</head>
<style>
.book_con01{
height: 572px;
}</style>
<body style="background-color: #e6ecf5; min-width: 1100px">
<div class="book_con01">
<h1 class="book_h01">新闻编辑</h1>
<form id="form_new">
<table class="book_table" border="1" cellpadding="10">
<tr>
<td class="table_td"><p>标题</p>
<span>*</span></td>
<td colspan="5"> <input type="text" class="book_input03"
name="title" id="title"required /></td>
</tr>
<tr>
<td class="table_td" ><p>作者</p>
<span></span></td>
<td colspan="5"><input readonly="readonly" id="mname" type="text" class="book_input03"
minlength="2" required />
<input type="hidden" id="mid" name="autor" />
<input type="hidden" id="pic" name="pic" />
</td>
</tr>
<tr>
<td class="table_td"><p>原创/转载</p>
<span></span></td>
<td colspan="2" class="sex"><input type="text" id="src" class="book_input03"
name="src" minlength="2" required /> </td>
<td class="table_td"><p>分类</p>
<span></span></td>
<td colspan="2" class="sex">
<select required name="type" id="category"></select>
</td>
</tr>
<input type="hidden" name="content" id="content" />
<tr>
<td class="table_td table_td1"><p>文本内容</p>
<span></span></td>
<td colspan="5">
<div id="editor" style="text-align: left;">
<div>新闻编辑</div>
</div>
</td>
</tr>
</table>
<p class="book_foot" >
</form>
</div>
</p>
<div class="layui-btn" id="btn1" style="position:absolute; top:64% ;left:38%" > 提交</div>
<input type="reset" class="layui-btn" style="position:absolute; top:64% ;left: 46%" value="重 置" />
<div class="layui-btn" id="btn2" onclick="addnews()" style="position:absolute; top:64% ;left:54%" > 接口添加</div>
</p>
<script >
function addnews(){
layer.open({
type: 1,
anim: 1,
btn: ['确定', '取消'] ,
offset: '150px',
area: '400px',
content: ' <p class="book_foot" ><div><label> 数目 </label><select class="goods_input" id="getcount"><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="30">40</option></select></div> <div><label>索引</label><input required type="text" id="suoyin" class="goods_input"></div> </p>'
,yes: function(index, layero){
var num=$("#getcount").val();
var start= $("#suoyin").val();
$.post("/manager/news",{"num":num,"start":start},function(data){
var news=data.result.result.list;
$.each(news,function(i,val){ //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
var json ={ "title":val.title,
"pic":val.pic,
"src":val.src,
"pic":val.pic,
"content":val.content,
"time":val.time
}
$.post("/manager/addnews",json,function(date){
layer.alert(date.msg,{offset: '150px'});
},"json");
layer.close(index)
});
});
},
});
}
//添加评论信息 和seesion
$.post("/new/findtype",function(rs){
$("#mname").val(rs.manager.mname);
$("#mid").val(rs.manager.mid);
$.each(rs.Category,function(i,val){
var category= ' <option value='+val.id+'>'+val.category+'</option>' ;
$("#category").append(category);
});
});
// 读取 富文本html 获取表单数据
document.getElementById('btn1').addEventListener('click', function () {
console.log(editor.txt.html())
//将富文本编辑器的内容插入到隐藏域中
document.getElementById('content').value=editor.txt.html();
var content=$("#form_new").serialize();
console.log(content);
$.post("/new/addnews",content,function(rs){
alert("提交成功 审核中");
//清空表单
editor.txt.html("")
editor.txt.html()
document.getElementById("title").value="";
document.getElementById("src").value="";
})
//alert(editor.txt.html())
}, false)
</script>
<!--富文本框 -->
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 关闭粘贴样式的过滤
editor.customConfig.pasteFilterStyle = false;
// 忽略粘贴内容中的图片
editor.customConfig.pasteIgnoreImg = false;
//插入链接的校验
editor.customConfig.linkCheck = function (text, link) {
console.log(text) // 插入的文字
console.log(link) // 插入的链接
return true // 返回 true 表示校验成功
// return '验证失败' // 返回字符串，即校验失败的提示信息
}
editor.customConfig.linkImgCheck = function (src) {
// console.log(src) // 图片的链接
return true // 返回 true 表示校验成功
// return '验证失败' // 返回字符串，即校验失败的提示信息
}
// 自定义处理粘贴的文本内容
editor.customConfig.pasteTextHandle = function (content) {
// content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
return content + '<p>在粘贴内容后面追加一行</p>'
}
var i
//插入网络图片时，可通过如下配置获取到图片的信息
editor.customConfig.linkImgCallback = function (url) {
$("#pic").val(url);
// alert(url)// url 即插入图片的地址
return true
}
//base64直接存在数据库
// editor.customConfig.uploadImgShowBase64 = true
//上传到服务器
editor.customConfig.uploadFileName = 'myFile'; //设置文件上传的参数名称
editor.customConfig.uploadImgServer = '/new/upload'
editor.customConfig.uploadImgHooks = { success: function (xhr, editor, result) {
// 图片上传并返回结果，图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
console.log(result);
}}
editor.create()
</script>
</body>
</html>
SpringMVC 处理本地图片上传的代码
//wangeditor 图片把图片存储到服务器
@RequestMapping(path = "/upload", produces = { "application/json;charset=utf-8" })
@ResponseBody
public Map<String, Object> file(HttpServletRequest request,MultipartFile myFile) throws IllegalStateException, IOException {
Map<String, Object> map =new HashMap<String, Object>();
//获取保存文件的真实路径
String savePath=request.getServletContext().getRealPath("/uploads");
//System.out.println("savePath="+savePath);
//获取文件上传名字
String filename =myFile.getOriginalFilename();
// System.out.println("filename="+filename);
//创建File对象
File file =new File(savePath,filename);
//System.out.println("file"+file);
try {
//保存文件
myFile.transferTo(file);
String imgIrl=savePath+"\\"+filename;
// 图片地址
String imgUrl = request.getContextPath() + "/uploads/" + filename;
map.put("errno", 0);
String[] myList = {imgUrl};
map.put("data", myList);
return map;
} catch (Exception e) {
// TODO: handle exception
}
return map;
}
3166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
