富文本编辑器 - layui.layedit的插入图片

喜欢ヅ旅行 2022-02-13 10:53 384阅读 0赞

# 效果展示 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bmVfRmx5aW5nRnJvc3Q_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bmVfRmx5aW5nRnJvc3Q_size_16_color_FFFFFF_t_70 1]

## 1.JSP代码 ##

<textarea id="text" style="display: none">请输入文本</textarea>

## 2.JS代码 ##

layui.use('layedit', function(){
        var layedit = layui.layedit;
       		//layedit.set要放在build的上面
        layedit.set({
            uploadImage: {
                url: '/uplaod/uploadFile' //接口url
                ,type: 'post' //默认post
            }
        });
        var text = layedit.build('text',{
            height: 700});

## 3.Controller ##

@Controller
    	@RequestMapping("/uplaod")
    	public class UploadController {
        //上传文件
            @ResponseBody
            @RequestMapping(value = "/uploadFile")
            public Map uploadFile(HttpServletRequest request, @Param("file") MultipartFile file) throws IOException {
                Map<String, Object> map = new HashMap<>();
                Map<String, Object> map2 = new HashMap<>();
                if (file != null) {
                    String webapp = request.getServletContext().getRealPath("/");
                    try {
                        String substring = file.getOriginalFilename();
                        // 图片的路径+文件名称
                        String fileName = "/static/upload/" + substring;
                        System.out.println(fileName);
                        // 图片的在服务器上面的物理路径
                        File destFile = new File(webapp, fileName);
                        // 生成upload目录
                        File parentFile = destFile.getParentFile();
                        if (!parentFile.exists()) {
                            parentFile.mkdirs();// 自动生成upload目录
                        }
                        // 把上传的临时图片，复制到当前项目的webapp路径
                        FileCopyUtils.copy(file.getInputStream(), new FileOutputStream(destFile));
                        map = new HashMap<>();
                        map2 = new HashMap<>();
                        map.put("code", 0);//0表示成功，1失败
                        map.put("msg", "上传成功");//提示消息
                        map.put("data", map2);
                        map2.put("src", fileName);//图片url
                        map2.put("title", substring);//图片名称，这个会显示在输入框里
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
                return map;
            }
          }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bmVfRmx5aW5nRnJvc3Q_size_16_color_FFFFFF_t_70]: /images/20220213/5580407a4a7a4c55bb8895a67b2bd7be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bmVfRmx5aW5nRnJvc3Q_size_16_color_FFFFFF_t_70 1]: /images/20220213/e86af8ff8377458d87e5d3791ec64609.png