若依框架富文本框的实现：
前端部分
- 引入summernote的js跟css
<head>
<th:block th:include="include :: header('新增工程')" />
<th:block th:include="include :: summernote-css" />
<th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<th:block th:include="include :: summernote-js" />
- 写入富文本样式的标签
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-3 control-label">现状描述：</label>
<div class="col-sm-8">
<input name="xzms" id="xzms" type="hidden">
<div class="summernote"></div>
</div>
</div>
</div>
- 写入js代码
$('.summernote').summernote({
placeholder: '请输入现状描述',
height: 150,
lang: 'zh-CN',
followingToolbar: false,
callbacks: {
onImageUpload: function (files){
sendFile(files[0],this);
}
}
});
function sendFile(file,obj) {
var data = new FormData();
data.append('file',file);
$.ajax({
type: "POST",
url: ctx + "common/upload",
data: data,
cache: false,
contentType: false,
processData: false,
dataType: 'json',
success: function(result) {
if(result.code == web_status.SUCCESS){
$(obj).summernote('editor.insertImage',result.url,result.fileName);
}else {
$.modal.alertError('result.msg');
}
},
error: function(error) {
$.modal.alertWarning("图片上传失败！");
}
});
}
后端部分
/**
* 通用上传请求（单个）
*/
@PostMapping("/upload")
@ResponseBody
public AjaxResult uploadFile(MultipartFile file) throws Exception
{
try
{
// 上传文件路径
String filePath = RuoYiConfig.getUploadPath();
// 上传并返回新文件名称
String fileName = FileUploadUtils.upload(filePath, file);
String url = serverConfig.getUrl() + fileName;
AjaxResult ajax = AjaxResult.success();
ajax.put("url", url);
ajax.put("fileName", fileName);
ajax.put("newFileName", FileUtils.getName(fileName));
ajax.put("originalFilename", file.getOriginalFilename());
return ajax;
}
catch (Exception e)
{
return AjaxResult.error(e.getMessage());
}
}
function submitHandler() {
if ($.validate.form()) {
var sHTML = $('.summernote').summernote('code');
$("#xzms").val(sHTML);
var data = $("#form-gongcheng-add").serializeArray();
$.operate.saveTab(prefix + "/add", data);
}
}
实现效果
