需求：
在线反馈功能，为了更好描述问题，因此问题提交前有一个图文描述（能支持视频最好）。
工具：
后端:Java
前端：LayUI
插件：thymeleaf
文本编辑器用:kz.layedit 富文本编辑器拓展
HTML
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" th:href="@{lib/layui-v2.5.5/css/layui.css}" media="all">
<link rel="stylesheet" th:href="@{css/public.css}" media="all">
</head>
<body>
<textarea id="layeditDemo"></textarea>
</body>
<script th:src="@{lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
<script th:src="@{lib/layui-v2.5.5/ace/ace.js}" charset="utf-8"></script>
<script>
layui.use(['layedit', 'layer', 'jquery'], function () {
var $ = layui.jquery
, layer = layui.layer
, layedit = layui.layedit;
layedit.set({
//暴露layupload参数设置接口 --详细查看layupload参数说明
uploadImage: {
url: '/uploadFile',
accept: 'image',
acceptMime: 'image/*',
exts: 'jpg|png|gif|bmp',
size: 1024 * 10,
data: {
name: "测试参数",
age: 99
}
, done: function (data) {
console.log(data);
}
},
uploadVideo: {
url: 'your url',
accept: 'video',
acceptMime: 'video/*',
exts: 'mp4|flv|avi|rm|rmvb',
size: 1024 * 10 * 2,
done: function (data) {
console.log(data);
}
}
, uploadFiles: {
url: 'your url',
accept: 'file',
acceptMime: 'file/*',
size: '20480',
autoInsert: true, //自动插入编辑器设置
done: function (data) {
console.log(data);
}
}
//右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作，
//传递参数：
//图片： imgpath --图片路径
//视频： filepath --视频路径 imgpath --封面路径
//附件： filepath --附件路径
, calldel: {
url: 'your url',
done: function (data) {
console.log(data);
}
}
, rightBtn: {
type: "layBtn",//default|layBtn|custom 浏览器默认/layedit右键面板/自定义菜单 default和layBtn无需配置customEvent
customEvent: function (targetName, event) {
//根据tagName分类型设置
switch (targetName) {
case "img":
alert("this is img");
break;
default:
alert("hello world");
break;
};
//或者直接统一设定
//alert("all in one");
}
}
//测试参数
, backDelImg: true
//开发者模式 --默认为false
, devmode: true
//是否自动同步到textarea
, autoSync: true
//内容改变监听事件
, onchange: function (content) {
console.log(content);
}
//插入代码设置 --hide:false 等同于不配置codeConfig
, codeConfig: {
hide: true, //是否隐藏编码语言选择框
default: 'javascript', //hide为true时的默认语言格式
encode: true //是否转义
, class: 'layui-code' //默认样式
}
//新增iframe外置样式和js
, quote: {
style: ['Content/css.css'],
//js: ['/Content/Layui-KnifeZ/lay/modules/jquery.js']
}
//自定义样式-暂只支持video添加
//, customTheme: {
// video: {
// title: ['原版', 'custom_1', 'custom_2']
// , content: ['', 'theme1', 'theme2']
// , preview: ['', '/images/prive.jpg', '/images/prive2.jpg']
// }
//}
//插入自定义链接
, customlink: {
title: '插入layui官网'
, href: 'https://www.layui.com'
, onmouseup: ''
}
, facePath: 'http://knifez.gitee.io/kz.layedit/Content/Layui-KnifeZ/'
, devmode: true
, videoAttr: ' preload="none" '
//预览样式设置，等同layer的offset和area规则，暂时只支持offset ,area两个参数
//默认为 offset:['r'],area:['50%','100%']
//, previewAttr: {
// offset: 'r'
// ,area:['50%','100%']
//}
, tool: [
'html', 'undo', 'redo', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'removeformat', 'fontFomatt', 'fontfamily', 'fontSize', 'fontBackColor', 'colorpicker', 'face'
, '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'images', 'image_alt', 'video', 'attachment', 'anchors'
, '|'
, 'table', 'customlink'
, 'fullScreen', 'preview'
]
, height: '500px'
});
var ieditor = layedit.build('layeditDemo');
})
</script>
</html>
JAVA
package com.flo.controller;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
@RestController
public class UploadFileController {
@ResponseBody
@RequestMapping("/uploadFile")
public JSON uploadFile(MultipartFile file, HttpServletRequest request) {
JSONObject json=new JSONObject();
String filePath = System.getProperty("user.dir")+"/src/main/resources/static/uploadFile/";//上传到这个文件夹
File file1 = new File(filePath);
if (!file1.exists()) {
file1.mkdirs();
}
String finalFilePath = filePath + file.getOriginalFilename().trim();
File desFile = new File(finalFilePath);
if (desFile.exists()) {
desFile.delete();
}
try {
file.transferTo(desFile);
json.put("code",0);
json.put("msg","ok");
JSONObject json2=new JSONObject();
json2.put("src","/uploadFile/"+ file.getOriginalFilename().trim());
json2.put("title","11");
json.put("data",json2);
} catch (Exception e) {
System.out.println(e.getMessage());
json.put("code",1);
}
System.out.println(json);
return json;
}
}
效果
注意：
要使用编辑器中的HTML功能，需要引入JS
<script th:src="@{lib/layui-v2.5.5/ace/ace.js}" charset="utf-8"></script>
后记
或许有人会问，为什么不用Layui自带的文本编辑器，因为官方的文本编辑器功能非常少（连最基本的视频上传都没有），所以就用别人利用layui修改过的layedit以实现更强大的功能，目前这个文本编辑器虽然很强大（够用了），但仍有一点点不足，比如，上传图片，应该可以配置图片的默认高度或者宽度，然后对度的高度或者宽度变成auto，这样省去了修改尺寸的麻烦；再比如，不支持JPEG的图片，遇到JPEG的不显示，问题就是这些，我已经通过码云私信给作者了。