LayUI富文本域是一款轻量级的富文本编辑器，页面设计比较简约。之前写项目时因为用的是LayUI框架，所以富文本域当时就用的LayUI富文本编辑器，这里整理一下。

先来看一下效果图，页面效果图。

 

访问效果图：

首先需要引入LayUI的JS和CSS样式文件。

显示LayUI的富文本域页面只需要放一个textarea标签，可以设置富文本域的默认值。

<textarea id="lay_edit" lay-verify="content" name = "text" th:text="${model.text}"></textarea>

之后用JS渲染页面。

1. <script>
2. layui.use([‘layedit’, ‘form’], function(){
3. var form = layui.form;
4. var layedit = layui.layedit;
5. layedit.set({ //设置图片接口
6. uploadImage: {
7. url: ‘layEdit/upload’, //接口url
8. type: ‘post’
9. }
10. });
11. //创建一个编辑器，lay_edit为textarea标签的id值
12. var index = layedit.build(‘lay_edit’,{
13. height: 350 //设置编辑器的高度
14. });
15. //提交时把值同步到文本域中
16. form.verify({
17. //content富文本域中的lay-verify值
18. content: function(value) {
19. return layedit.sync(index);
20. }
21. });
22. });
23. </script>

 

上面代码主要有三部分。

设置图片上传的接口。

1. layedit.set({ //设置图片接口
2. uploadImage: {
3. url: ‘layEdit/upload’, //接口url
4. type: ‘post’
5. }
6. });

 

图片上传后台方法。

1. @RequestMapping(value=“/upload”)
2. @ResponseBody
3. public Object upload(MultipartFile file) {
4. String filename = file.getOriginalFilename();
5. String uuid = UUID.randomUUID().toString();
6. boolean boole = fileService.saveFile(file, uuid);
7. if (boole) {
8. Map<String,Object> map = new HashMap<String,Object>();
9. Map<String,Object> map2 = new HashMap<String,Object>();
10. map.put(“code”, 0); //0表示上传成功
11. map.put(“msg”,“上传成功”); //提示消息
12. map2.put(“src”, “http://localhost/layEdit/download?uuid=”+uuid);
13. map2.put(“title”, filename);
14. map.put(“data”, map2);
15. return map;
16. } else {
17. return file.getOriginalFilename();
18. }
19. }

 

返回的数据格式是LayUI固定的，LayUI前台接收返回的数据格式为：

1. {
2.       “code”: 0,      //0表示成功，其他表示失败
3.       “msg”: “”,       //提示信息，//一般上传失败后返回
4.       “data”:  {
5.            “src”: “图片路径”,
6.            “title”:  “图片名称”    //可选
7.       }
8. }

 

其中saveFile方法为图片上传方法，上传返回的地址是下载方法的地址，其代码如下。

1. // 图片存放位置
2. private final static String IMAGEPATH=“e:\\layui\\image”;
4. //保存图片
5. @Transactional
6. public boolean saveFile(MultipartFile file, String uuid){
7. try{
8. File path = path(file.getContentType());
9. String filename = file.getOriginalFilename();
10. FileImg fileEntity = new FileImg();
11. SimpleDateFormat sdf=new SimpleDateFormat(“yyyy-MM-dd HH:mm:ss”);
12. Date date=new Date();
13. fileEntity.setFileName(filename);
14. fileEntity.setUuid(uuid);
15. String storeaddress = path.getAbsolutePath();
16. fileEntity.setStoreaddress(storeaddress);
17. File saveFile = new File(path,uuid);
18. try {
19. fileRepository.save(fileEntity);
20. file.transferTo(saveFile);
21. return true;
22. } catch (IllegalStateException | IOException e) {
23. e.printStackTrace();
24. return false;
25. }
26. }catch (Exception e){
27. System.out.println(“图片保存异常”);
28. return false;
29. }
30. }
32. //图片地址是否存在
33. private File path(String filename) {
34. File pat=new File(“e:\\layui”);
35. File path = new File(FileService.IMAGEPATH);
36. if(!pat.isDirectory()) {
37. pat.mkdir();
38. }
39. if(!path.isDirectory()) {
40. path.mkdir();
41. }
42. return path;
43. }
45. /**
46. * 下载
47. * @param uuid
48. * @param request
49. * @param response
50. */
51. public void download(String uuid, HttpServletRequest request, HttpServletResponse response) {
52. FileImg fileentity = fileRepository.findByUuid(uuid);
53. String filename = fileentity.getFileName();
54. filename = getStr(request, filename);
55. File file = new File(fileentity.getStoreaddress(), uuid);
56. if(file.exists()) {
57. FileInputStream fis;
58. try {
59. fis = new FileInputStream(file);
60. response.setContentType(“application/x-msdownload”);
61. response.addHeader(“Content-Disposition”, “attachment; filename=” + filename );
62. ServletOutputStream out = response.getOutputStream();
63. byte[] buf=new byte[2048];
64. int n=0;
65. while((n=fis.read(buf))!=-1){
66. out.write(buf, 0, n);
67. }
68. fis.close();
69. out.flush();
70. out.close();
71. } catch (FileNotFoundException e) {
72. e.printStackTrace();
73. } catch (IOException e) {
74. e.printStackTrace();
75. }
76. }
77. }
79. private String getStr(HttpServletRequest request, String fileName) {
80. String downloadFileName = null;
81. String agent = request.getHeader(“USER-AGENT”);
82. try {
83. if(agent != null && agent.toLowerCase().indexOf(“firefox”) > 0){
84. //downloadFileName = “=?UTF-8?B?” + (new String(Base64Utils.encode(fileName.getBytes(“UTF-8”)))) + “?=”;
85. //设置字符集
86. downloadFileName = “=?UTF-8?B?” + Base64Utils.encodeToString(fileName.getBytes(“UTF-8”)) + “?=”;
87. }else{
88. downloadFileName = java.net.URLEncoder.encode(fileName, “UTF-8”);
89. }
90. } catch (UnsupportedEncodingException e) {
91. e.printStackTrace();
92. }
93. return downloadFileName;
94. }

 

渲染textarea富文本域。

1. //创建一个编辑器，lay_edit为textarea标签的id值
2. var index = layedit.build(‘lay_edit’,{
3. height: 350
4. });

 

其他属性参数。

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

1. tool: [
2. ‘strong’ //加粗
3. ,‘italic’ //斜体
4. ,‘underline’ //下划线
5. ,‘del’ //删除线
7. ,‘|’ //分割线
9. ,‘left’ //左对齐
10. ,‘center’ //居中对齐
11. ,‘right’ //右对齐
12. ,‘link’ //超链接
13. ,‘unlink’ //清除链接
14. ,‘face’ //表情
15. ,‘image’ //插入图片
16. ,‘help’ //帮助
17. ]

 

同步富文本域中的数据。

1. //提交时把值同步到textarea文本域中
2. form.verify({
3. //content富文本域中的lay-verify值
4. content: function(value) {
5. return layedit.sync(index);
6. }
7. });

 

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

页面全部代码。

1. <style type=“text/css”>
2. #myForm{
3. background: white;
4. padding: 30px;
5. }
6. </style>
7. <form id=“myForm” method=“post” class=“layui-form white-bg radius”>
8. <div class=“layui-form-item”>
9. <label class=“layui-form-label”>标题</label>
10. <div class=“layui-input-block”>
11. <input type=“text” class=“layui-input” name=“title” >
12. </div>
13. </div>
14. <div class=“layui-form-item”>
15. <label class=“layui-form-label”>发布人</label>
16. <div class=“layui-input-block”>
17. <input type=“text” class=“layui-input” name=“name” >
18. </div>
19. </div>
20. <div class=“layui-form-item”>
21. <label class=“layui-form-label”>内容</label>
22. <div class=“layui-input-block”>
23. <textarea id=“lay_edit” lay-verify=“content” name = “text” ></textarea>
24. </div>
25. </div>
26. <div class=“layui-form-item”>
27. <div class=“layui-input-block”>
28. <button type=“submit” lay-submit=“” class=“layui-btn layui-btn-radius layui-btn-normal” style=“width: 150px” lay-filter=“formSubmit” >保存</button>
29. </div>
30. </div>
31. </form>
33. <script>
34. layui.use([‘layedit’, ‘form’], function(){
35. var form = layui.form;
36. var layedit = layui.layedit;
37. layedit.set({ //设置图片接口
38. uploadImage: {
39. url: ‘layEdit/upload’, //接口url
40. type: ‘post’
41. }
42. });
43. //创建一个编辑器
44. var index = layedit.build(‘lay_edit’,{
45. height: 350
46. });
47. //提交时把值同步到文本域中
48. form.verify({
49. //content富文本域中的lay-verify值
50. content: function(value) {
51. return layedit.sync(index);
52. }
53. });
55. form.on(“submit(formSubmit)”, function (data) {
56. console.log(data.field);
57. $.post(“layEdit/save”, data.field, function(result){
58. layer.msg(result.msg,{offset:‘rb’});
59. });
60. return false;
61. })
62. });
63. </script>

 

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

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

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

1. @Override
2. public Object save(LayEditForm form) throws InstantiationException, IllegalAccessException {
3. try {
4. LayEdit model = new LayEdit();
5. SimpleDateFormat sdf=new SimpleDateFormat(“yyyy-MM-dd HH:mm:ss”);
6. Integer id = form.getId();
7. if(id!=null) {
8. model=layEditService.findById(id);
9. }else{
10. form.setCreatdate(sdf.format(new Date()));
11. }
12. BeanUtils.copyProperties(form, model,“id”);
13. layEditService.save(model);
14. return new AjaxResult(“数据保存成功”);
15. } catch (Exception e) {
16. return new AjaxResult(false,“数据保存失败”);
17. }
18. }

 

就写到这里了，如果还什么问题欢迎下方留言交流。