LayUI富文本域使用案例

File path = path(file.getContentType());

String filename = file.getOriginalFilename();

FileImg fileEntity = new FileImg();

SimpleDateFormat sdf=new SimpleDateFormat(“yyyy-MM-dd HH:mm:ss”);

Date date=new Date();

fileEntity.setFileName(filename);

fileEntity.setUuid(uuid);

String storeaddress = path.getAbsolutePath();

fileEntity.setStoreaddress(storeaddress);

File saveFile = new File(path,uuid);

try {

fileRepository.save(fileEntity);

file.transferTo(saveFile);

return true;

} catch (IllegalStateException | IOException e) {

e.printStackTrace();

return false;

}

}catch (Exception e){

System.out.println(“图片保存异常”);

return false;

}

}

//图片地址是否存在

private File path(String filename) {

File pat=new File(“e:\layui”);

File path = new File(FileService.IMAGEPATH);

if(!pat.isDirectory()) {

pat.mkdir();

}

if(!path.isDirectory()) {

path.mkdir();

}

return path;

}

/**

• 下载

• @param uuid

• @param request

• @param response

*/

public void download(String uuid, HttpServletRequest request, HttpServletResponse response) {

FileImg fileentity = fileRepository.findByUuid(uuid);

String filename = fileentity.getFileName();

filename = getStr(request, filename);

File file = new File(fileentity.getStoreaddress(), uuid);

if(file.exists()) {

FileInputStream fis;

try {

fis = new FileInputStream(file);

response.setContentType(“application/x-msdownload”);

response.addHeader(“Content-Disposition”, “attachment; filename=” + filename );

ServletOutputStream out = response.getOutputStream();

byte[] buf=new byte[2048];

int n=0;

while((n=fis.read(buf))!=-1){

out.write(buf, 0, n);

}

fis.close();

out.flush();

out.close();

} catch (FileNotFoundException e) {

e.printStackTrace();

} catch (IOException e) {

e.printStackTrace();

}

}

}

private String getStr(HttpServletRequest request, String fileName) {

String downloadFileName = null;

String agent = request.getHeader(“USER-AGENT”);

try {

if(agent != null && agent.toLowerCase().indexOf(“firefox”) > 0){

//downloadFileName = “=?UTF-8?B?” + (new String(Base64Utils.encode(fileName.getBytes(“UTF-8”)))) + “?=”;

//设置字符集

downloadFileName = “=?UTF-8?B?” + Base64Utils.encodeToString(fileName.getBytes(“UTF-8”)) + “?=”;

}else{

downloadFileName = java.net.URLEncoder.encode(fileName, “UTF-8”);

}

} catch (UnsupportedEncodingException e) {

e.printStackTrace();

}

return downloadFileName;

}

渲染textarea富文本域。

//创建一个编辑器，lay_edit为textarea标签的id值

var index = layedit.build(‘lay_edit’,{

height: 350

});

其他属性参数。

| 属性 | 类型 | 描述 |

| — | — | — |

| tool | Array | 重新定制编辑器工具栏，如： tool: [‘link’, ‘unlink’, ‘face’] |

| hideTool | Array | 不显示编辑器工具栏，一般用于隐藏默认配置的工具bar |

| height | Number | 设定编辑器的初始高度 |

| uploadImage | Object | 设定图片上传接口，如：uploadImage: {url: ‘/upload/’, type: ‘post’} |

目前LayUI富文本域可选的Bar有（顺序可以自由排列）：

tool: [

‘strong’ //加粗

,‘italic’ //斜体

,‘underline’ //下划线

,‘del’ //删除线

,‘|’ //分割线

,‘left’ //左对齐

,‘center’ //居中对齐

,‘right’ //右对齐

,‘link’ //超链接

,‘unlink’ //清除链接

,‘face’ //表情

,‘image’ //插入图片

,‘help’ //帮助

]

同步富文本域中的数据。

//提交时把值同步到textarea文本域中

form.verify({

//content富文本域中的lay-verify值

content: function(value) {

return layedit.sync(index);

}

});

通过上面的JS渲染代码就可以得到一个完整的富文本域了，效果图如下（可以根据自己需求修改属性）。

页面全部代码。

标题

发布人

内容

保存

关于富文本域的部分上面已经说的很清楚了，JS部分还包含了一个保存的方法。因为在富文本域渲染时设置了，提交时把值同步到textarea文本域中。所以这里就不用管了。

保存时，我们可以通过控制台输出看到表单序列化后的参数。

后台保存方法，新增和修改保存公用的一个方法，用ID作为区分，ID为null是新增，不为null为修改。

@Override

public Object save(LayEditForm form) throws InstantiationException, IllegalAccessException {

try {

LayEdit model = new LayEdit();

SimpleDateFormat sdf=new SimpleDateFormat(“yyyy-MM-dd HH:mm:ss”);

Integer id = form.getId();

if(id!=null) {

model=layEditService.findById(id);

}else{

form.setCreatdate(sdf.format(new Date()));

}

BeanUtils.copyProperties(form, model,“id”);

layEditService.save(model);

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，不论你是刚入门Java开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-lGGq3fNr-1715794620821)]

[外链图片转存中…(img-3RuUIEnu-1715794620822)]

[外链图片转存中…(img-Jd6X8nTu-1715794620822)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，不论你是刚入门Java开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！