1. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  2. <script src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"></script>
  1. <div id="editor"></div>
  2. <textarea style="display: none" name="blogContent" id="blogContent"></textarea>
  1. <!-- wangEditor 富文本编辑器 js -->
  2. <script type="text/javascript">
  3.     var E = window.wangEditor;
  4.     var editor = new E('#editor');
  6.     // 获取wangEditor中的内容
  7.     var blogContent = $('#blogContent');
  8.     // 监控wangEditor中的内容变化，并将html内容同步更新到 textarea
  9.     editor.config.onchange = function (newHtml) {
  10.         blogContent.val(newHtml);
  11.     };
  13.     editor.config.uploadImgServer = '[[@{/user/upload}]]'; // 文件上传接口
  14.     editor.config.uploadImgMaxSize = 5 * 1024 * 1024;  // 文件大小5M
  15.     editor.config.uploadImgMaxLength = 9;
  16.     editor.config.uploadFileName = 'files';
  17.     editor.config.uploadImgHooks = {
  18.         success: function (xhr, editor, result) {
  19.             console.log("上传成功");
  20.         },
  21.         fail: function (xhr, editor, result) {
  22.             console.log("上传失败,原因是" + result);
  23.         },
  24.         error: function (xhr, editor) {
  25.             console.log("上传出错");
  26.         },
  27.         customInsert: function(insertImgFn, result) {
  28.             // 图片上传并返回结果
  29.             var url = result.url;
  30.             insertImgFn(url);
  31.         }
  32.     }
  33.     editor.create();
  34.     // 初始化 textarea 的值
  35.     blogContent.val(editor.txt.html());
  36. </script>
  1. // 上传文件
  2.     @ResponseBody
  3.     @RequestMapping("/upload")
  4.     public String fileUpload(@RequestParam("files") MultipartFile files) throws IOException {
  5. //        // win系统 上传路径保存设置
  6. //        // 获取项目路径
  7. //        File projectPath = new File(ResourceUtils.getURL("classpath:").getPath());
  8. //        // 绝对路径=项目路径+自定义路径
  9. //        File pathFile = new File(projectPath.getAbsolutePath(), "static/upload/");
  10. //        if (!pathFile.exists()) {
  11. //            pathFile.mkdirs();
  12. //        }
  13. //        //上传文件地址
  14. //        UUID uuid = UUID.randomUUID();
  15. //        File serverFile = new File(pathFile, uuid + "_" + files.getOriginalFilename());
  16. //        files.transferTo(serverFile);
  17. //
  18. //        String imgPath = ("/upload/" + uuid + "_" + files.getOriginalFilename()).replace("\\", "/");
  19. //
  20. //        return imgPath;
  22.         // Linux服务器  上传路径保存设置
  23.         // 项目路径  /home/www/
  24.         File pathFile = new File("/home/www/upload/");
  25.         if (!pathFile.exists()) {
  26.             pathFile.mkdirs();
  27.         }
  28.         //上传文件地址
  29.         UUID uuid = UUID.randomUUID();
  30.         File serverFile = new File(pathFile, uuid + "_" + files.getOriginalFilename());
  31.         files.transferTo(serverFile);
  33.         String imgPath = ("/upload/" + uuid + "_" + files.getOriginalFilename()).replace("\\", "/");
  35.         return imgPath;
  36.     }
  1. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  2. <script src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"></script>

 

  1. <!--  ${urDetailBlog.getBlogContent()}  后台获取的WangEditor编辑器提交的html代码  -->
  2. <div id="detailBlog1" hidden th:text="${urDetailBlog.getBlogContent()}"></div>  
  3. <div id="detailBlog"></div>
  1. <script>
  2.     $(function() {
  3.         $("#detailBlog").html($("#detailBlog1").text());
  4.     });
  5. </script>

 

 

 

版权声明：本文为dmflysky原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/dmflysky/p/14451376.html