wangEditor富文本编辑器实现上传
实现功能：文章撰写
实现效果：文章名称、标题、图片、和文章上传保存
工具：wangEditor.js (富文本编辑器),xss.js(过滤富文本编辑器的特殊内容)，XMLHttpRequest（实现仿ajax提交）
效果如下：
wangEditor配置和创建：
引用wangEditor.js(百度即可找到)
<script type="text/javascript" src="wangEditor.min.js">script>
var editor;
jQuery(document).ready(function($) {
//富文本编辑器的配置
var E = window.wangEditor;
//实例化E：第一个参数是编辑器菜单栏的标签，第二个参数是编辑器内容的标签
editor = new E('#editor1', '#editor2');
//配置菜单栏
editor.customConfig.menus = [
'head', // 标题 'bold', // 粗体
'fontSize', // 字号 'list', // 列表
'justify', // 对齐方式 'quote', // 引用
'emoticon', // 表情 'image', // 插入图片
'table', // 表格 'video', // 插入视频
'code', // 插入代码 'undo', // 撤销
'redo' // 重复 'fontName', // 字体 'italic', // 斜体 'underline', // 下划线
'strikeThrough', // 删除线 'foreColor', // 文字颜色
'backColor', // 背景颜色 'link', // 插入链接
];
// 使用 base64 保存图片
editor.customConfig.uploadImgShowBase64 = true;
//设置一次上传图片张数
editor.customConfig.uploadImgMaxLength =1;
//设置图片最大为多少
editor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024;
editor.customConfig.showLinkImg = false; // 隐藏“网络图片”tab
editor.create();//创建
});
图片预览方法：
var tr=false;
function changefile(){
var preview = document.getElementById('img_file'); //获取img标签
//声明图片类型的数组
var imgExt = new Array(".png",".jpg",".jpeg",".bmp",".gif");
//获取input【file】的图片名称
var fileName=$("#inp_file").val().toString();
// alert(fileName)
//调用其他方法判断选择的文件是否是图片
if(imgExt.contain(fileName.extension())){
var file = document.getElementById('inp_file').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
};
tr=true;
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}else{
tr=false;
alert("文件类型不是图片！");
}
};
将文章上传到后台方法:
引用xss.js(百度即可)
<script type="text/javascript" src="xss.js">script>
function submit_1(){
//获取富文本编辑器的内容
var html = editor.txt.html();
//设置xss过滤的白名单
var options = {
//设置白名单内容：格式'标签名'：【标签属性】
whiteList: {
'span': ['style'],
'p':[],
'font':['color','size'],
'br' :[],
'strong':[],
'em':[],
'img':['src','style']
},
onTagAttr: function (tag, name, value, isWhiteAttr) {
//tag-标签，name-标签属性，value属性值，isWhiteAttr-是否为白名单上的属性
//因为xss.js自身会过滤链接，但是编辑器内容的图片内容是需要保存到后台，所以要手动拼接回来
if (tag=='img'&& name === 'src') {
return name + '="' + value + '"';
}
}
};
//调用filterXSS方法，实现自定义过滤
var filterHtml = filterXSS(html, options);
//获取图片资源
var imgfile= document.getElementById('inp_file').files[0];
//获取名称
var name=$("#sizing-addon2").val().trim();
//获取标题
var title=$("#sizing-addon3").val().trim();
//判断不能为空
if(name==undefined||name==""){
alert("名称不能为空！！！");
return;
}
if(title==undefined||title==""){
alert("标题不能为空！！！");
return;
}
//如果tr为false，则表示选择的不是图片或者没有选择
if(tr==false){
alert("图片格式不正确！");
return;
}
//实例化XMLHttpRequest
var xmlhttp=null;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//早期IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
//实例化一个form数据：内容格式为 键值对
var form = new FormData();
form.append("filterHtml", filterHtml);
form.append("imgfile", imgfile);
form.append("name", name);
form.append("title", title);
//成功调用并返回
xmlhttp.addEventListener("load", function (event) {
if (event.currentTarget.responseText == "success") {
alert("保存成功！");
window.location.href="${ctx}/Main/Index";
}
else if("error"==event.currentTarget.responseText){
alert("用户不存在，新增失败！");
}else {
alert("新增失败，请确保图片格式正确并且并且文章合法，或者刷新重试！！！");
}
}, false);
xmlhttp.addEventListener("error", function (event) { //调用失败
alert("保存失败！");
}, false);
//声明提交方式和请求路径
xmlhttp.open('POST', "${ctx}/Main/ArticleInsert");
// xmlhttp.setRequestHeader("Content-Type","utf-8");
//传入数据
xmlhttp.send(form);
}else
{alert("浏览器版本太低，请使用高版本的浏览器或其他浏览器!");
}};
有关Java文件上传的后台代码请看另一篇博客：https://blog.csdn.net/weixin_44600235/article/details/96366333