LayUI富文本域使用案例

LayUI富文本域使用案例

LayUI富文本域使用案例

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

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

20200111135524429

 

访问效果图:

20200103131246766

首先需要引入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>

 

newCodeMoreWhite-1

上面代码主要有三部分。

设置图片上传的接口。

  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. }

 

newCodeMoreWhite-1

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

 

newCodeMoreWhite-1

渲染textarea富文本域。

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

 

其他属性参数。

属性 类型 描述
tool Array 重新定制编辑器工具栏,如: tool: [‘link’, ‘unlink’, ‘face’]
hideTool Array 不显示编辑器工具栏,一般用于隐藏默认配置的工具bar
height Number 设定编辑器的初始高度
uploadImage Object 设定图片上传接口,如:uploadImage: {url: ‘/upload/’, type: ‘post’}

目前LayUI富文本域可选的Bar有(顺序可以自由排列):

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

 

同步富文本域中的数据。

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

 

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

20200111140056724

页面全部代码。

  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>
  32. <script>
  33. layui.use([‘layedit’, ‘form’], function(){
  34. var form = layui.form;
  35. var layedit = layui.layedit;
  36. layedit.set({ //设置图片接口
  37. uploadImage: {
  38. url: ‘layEdit/upload’, //接口url
  39. type: ‘post’
  40. }
  41. });
  42. //创建一个编辑器
  43. var index = layedit.build(‘lay_edit’,{
  44. height: 350
  45. });
  46. //提交时把值同步到文本域中
  47. form.verify({
  48. //content富文本域中的lay-verify值
  49. content: function(value) {
  50. return layedit.sync(index);
  51. }
  52. });
  53. form.on(“submit(formSubmit)”, function (data) {
  54. console.log(data.field);
  55. $.post(“layEdit/save”, data.field, function(result){
  56. layer.msg(result.msg,{offset:‘rb’});
  57. });
  58. return false;
  59. })
  60. });
  61. </script>

 

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

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

20200111143141103

后台保存方法,新增和修改保存公用的一个方法,用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. }

 

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