具体的一些操作我是看别人写的博客,这个是地址https://blog.csdn.net/yehaocheng520/article/details/106033965
写的挺好的
具体的上传图片的操作
https://blog.csdn.net/weixin_40079336/article/details/82964495
上传图片的操作刚开始看可能会不太明白,主要的代码就是
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor');
editor.customConfig.uploadImgServer = root + "fileLssue/upload1.do"; //上传URL
editor.customConfig.uploadFileName = 'myFileName';
editor.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
debugger;
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
var url =result.data;
insertImg(url);
// result 必须是一个 JSON 格式字符串!!!否则报错
}
}
editor.create();
</script>
editor.customConfig.uploadImgServer = root + "fileLssue/upload1.do"; 这个主要是你上传图片的接口
editor.customConfig.uploadFileName = 'myFileName'; 这个是你接口的参数名称
editor.customConfig.uploadImgHooks 这个是请求接口之后可以获取返回的参数,
如果你有上传图片的接口的话,就不用他写的那个接口,没有的话,可以参考一下
下面这个是我的上传图片接口
@RequestMapping("/uploadContractFileOther.do")
@ResponseBody
public ResultData uploadContractFileOther(MultipartFile file){
try {
if(file == null || file.getSize() <= 0){
return ResultData.fail("上传文件不能为空");
}
if(file.getSize() > 1024 * 1024 * 20){
return ResultData.fail("上传文件大小不能超过20M");
}
String fileName = file.getOriginalFilename();
fileName = fileName.substring(0,fileName.lastIndexOf("."));
OSSClientUtil oss = new OSSClientUtil();
String name = oss.uploadContractFile(file);
String url = oss.getContractFileUrl(name);
return ResultData.success("成功",url);
}catch (Exception e){
e.printStackTrace();
return ResultData.fail("服务器异常,上传文件失败");
}
}
public String uploadContractFile(MultipartFile file) throws ImgException {
String originalFilename = file.getOriginalFilename();
String substring = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
Random random = new Random();
String name = random.nextInt(10000) + System.currentTimeMillis() + substring;
InputStream inputStream = null;
try {
inputStream = file.getInputStream();
//创建上传Object的Metadata
ObjectMetadata objectMetadata = new ObjectMetadata();
objectMetadata.setContentLength(inputStream.available());
objectMetadata.setCacheControl("no-cache");
objectMetadata.setHeader("Pragma", "no-cache");
objectMetadata.setContentType(getcontentType(name.substring(name.lastIndexOf("."))));
objectMetadata.setContentDisposition("inline;filename=" + name);
//上传文件
String path = contractFiledir;//这个是你上传文件的地址 需要改下
ossClient.putObject(bucketName//这个参数是空间名称,因为这个是上传到阿里云的,具体的你们自己试, path + name, inputStream, objectMetadata);
return name;
} catch (Exception e) {
throw new ImgException("文件上传失败");
}finally {
try {
if (inputStream != null) {
inputStream.close();
}
} catch (IOException e) {
e.printStackTrace();
}
ossClient.shutdown();
}
}
//这个是处理地址的
public String getContractFileUrl(String fileUrl) {
if (!StringUtils.isEmpty(fileUrl)) {
String[] split = fileUrl.split("/");
return this.getUrl(this.contractFiledir + split[split.length - 1]);
}
return null;
}
下面的是富文本框页面 js 和请求接口时候参数的处理
这个是我js配置富文本框
var A = window.wangEditor;
var editorA = new A('#detail');
editorA.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
//'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
//'quote', // 引用
//'emoticon', // 表情
'image', // 插入图片
//'table', // 表格
//'video', // 插入视频
//'code', // 插入代码
'undo', // 撤销
'redo' // 重复
];
editorA.customConfig.onchange = function (html) {
// html 即变化之后的内容
html=decodeURIComponent(html);
$('#detail .w-e-text-container p').addClass("defaultStyle")
$('#detail .w-e-text-container>div>div').addClass("defaultStyle")
}
// editorA.customConfig.uploadImgShowBase64 = true
editorA.customConfig.uploadImgServer = projectUrl+ '/file/uploadContractFile.do'
editorA.customConfig.uploadFileName = 'file';
editorA.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
// debugger;
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
var url =result.data.url;
insertImg(url);
// result 必须是一个 JSON 格式字符串!!!否则报错
}
}
editorA.customConfig.customAlert = function (info) {
// info 是需要提示的内容
alert('自定义提示:' + info)
}
editorA.create();
$('#goodsDescribe .w-e-text-container').height('200');
document.getElementById('detail').addEventListener('click', function () {
// 读取 html
console.log(decodeURIComponent(editorA.txt.html()))
}, false)
参数的处理
form.on('submit(saveActivity)', function(data){
//富文本框 下面是对内容的处理
var dataA = editorA.txt.html();
var textElemReg = /<([a-z]+?)(?:\s+?[^>]*?)?>\s*?<\/\1>/;
var replaceP = /<p><br><\/p><p><br><\/p>/;
do{
dataA = dataA.replace(textElemReg, '');
}while(textElemReg.test(dataA)); // 去除多余的空标签
do{
dataA = dataA.replace(replaceP, '');
}while(replaceP.test(dataA)); // 去除多余的换行符
dataA=decodeURIComponent(dataA);
data.field.content = encodeURI(dataA)
dataA = dataA.replace(/[ |" "|\n]/g,"");//去掉空格计数
dataA =dataA.replace(/<[^>]*>|/g,"");//将HTML转化为纯文本
if(dataA!=null&&dataA!='') {
var length = jmz.GetLength(dataA);
if (length > 10000) {
layer.msg('最多输入10000个字符', {icon: 5});
return;
}
}else if(dataA == ''){
data.field.content = dataA
}
这个是我请求的接口
if (!edit){//添加
$.ajax({
type:"post",
url:projectUrl+"/business/addBusinessInfo.do",
data:data.field,
success:function(returnData){
if(returnData.status==0){
layer.msg(returnData.msg);
setTimeout(function () {
window.location.href = projectUrl + '/modelList/manage/businessInfo.jsp';
},3000)
}else{
layer.msg(returnData.msg);
}
},
})
return false//阻止表单提交
} else if (edit ){//编辑
$.ajax({
type:"post",
url:projectUrl+"/business/addBusinessInfo.do",
data:data.field,
success:function(returnData){
if(returnData.status==0){
layer.msg(returnData.msg);
setTimeout(function () {
window.location.href = projectUrl + '/modelList/manage/businessInfo.jsp';
},3000)
}else{
layer.msg(returnData.msg);
}
}
})
return false//阻止表单提交
}
});
这个是上面验证长度的
var jmz = {};
jmz.GetLength = function(str) {
return str.replace(/[\u0391-\uFFE5]/g,"aa").length; //先把中文替换成两个字节的英文,在计算长度
};