富文本编辑器KindEditor

蔚落 2022-12-11 06:25 596阅读 0赞

目录

      • 下载引入
      • 前端使用KindEditor
      • 后端处理表单
      • ajax

KindEditor是一个功能十分齐全的富文本编辑器，官网地址：http://kindeditor.net/demo.php

下载引入

http://www.kindsoft.net/down.php

  • 删掉asp、asp.net、jsp、php
  • lang里面只保留zh-CN.js
    语言只使用简体中文
  • themes里删掉qq、simple
    我只使用默认的主题default，qq、simple这2种主题都不用，也可以保留

弄好之后放在reources/plugins下

前端使用KindEditor

  1. <body>
  2. <form action="/handler" method="post">
  3.     <!-- 使用textarea作为容器 -->
  4.     <textarea id="editor" name="editor" style="width:700px;height:300px;">请输入内容</textarea>
  5.     <button type="submit">提交</button>
  6. </form>
  8. <!-- 引入KindEditor的2个js文件，上线时kindeditor-all.js换为min版 -->
  9. <script charset="utf-8" src="/plugin/kindeditor/kindeditor-all.js"></script>
  10. <script charset="utf-8" src="/plugin/kindeditor/lang/zh-CN.js"></script>
  12. <script> // 此变量代表KindEditor富文本编辑器，如果后续不使用此变量，也可以放在函数中 let editor; // 创建KindEditor富文本编辑器，也可以在js或jq的就绪函数中创建 KindEditor.ready(function () { editor = KindEditor.create('#editor', { uploadJson: '/fileHandler', //指定处理KindEditor上传文件的controller filePostName: 'file' //指定KindEditor上传文件使用的字段名 }); }); </script>
  14. </body>

常用方法

  • editor.focus() 聚焦
  • editor.isEmpty() 判断文本域中是否有内容，返回boolean
  • editor.html() 获取文本域的内容（转换为html代码） 返回string

如果使用ajx提交，可以用editor.html()获取文本域的内容放在data中；
如果使用js或jq的val属性来获取文本域的内容，需要先sync()同步，不然获取到的值是剔除html标签的。

  1. editor.sync();
  3. let str=document.getElementById("editor").value;
  4. // let str = $("#editor").val;
  • editor.html(string val) 设置文本域的内容，会自动解析val中的html标签。thymeleaf的 也可有同样的效果。

后端处理表单

提交的是editor.html()，包含html标签（富文本），用一个String来接收。

如果把这个值作为json数据返回给浏览器，浏览器会解析其中的html标签。

处理KindEditor上传的文件

上传文件、文本域内容的处理是分开的

  1. /** * 处理KindEditor上传的文件都用此方法处理 */
  2. @PostMapping("/fileHandler")
  3. @ResponseBody
  4. public Map fileUpload(HttpServletRequest request, @RequestParam("file") List<MultipartFile> fileList) { 
  5.     Map map = new HashMap<String, Object>();
  7.     // 检测用户是否上传了文件
  8.     if (!fileList.isEmpty() && fileList.size()>0){ 
  10.         // 处理上传文件
  11.         for (MultipartFile tempFile:fileList){ 
  12.             // 使用uuid防止文件重名，原文件名中包含扩展名，放最后面
  13.             String newFilename= UUID.randomUUID()+"_"+tempFile.getOriginalFilename();
  14.             File file = new File("/upload/" + newFilename);
  15.             System.out.println(file.getPath());
  16.             // 如果要对不同类型的文件做不同处理，可以判断文件类型，也可以根据原文件名来判断
  17.             // String fileType = file.getContentType();
  18.             try { 
  19.                 // 保存文件
  20.                 tempFile.transferTo(file);
  21.                 map.put("error", 0);
  22.                 map.put("url", file.getPath());
  23.             } catch (IOException e) { 
  24.                 e.printStackTrace();
  25.                 map.put("error", 1);
  26.                 map.put("message", "上传文件失败！");
  27.             }
  28.         }
  29.     }
  30.     else { 
  31.         map.put("error", 1);
  32.         map.put("message", "请先选择要上传的文件！");
  33.     }
  34.     return map;
  35. }

KindEditor的作者规定：要返回一个2个参数

  • error 结果代码，0表示成功，1表示失败
  • 如果成功传递保存路径；如果失败传递失败原因

ajax

  1. K.ajax(
  2.     '../xxx/xxx',
  3.     data => {   //回调函数
  4.         //.....
  5.     },
  6.     'POST',
  7.     {    //携带的数据
  8.         name : 'chy',
  9.         age : 20
  10.     }
  11. );

请求方式、携带的数据均可选，缺省请求方式时默认为get。

发表评论

表情：
评论列表 （有 0 条评论，596人围观）

还没有评论，来说两句吧...

相关阅读