layui使用富文本编辑器

最新推荐文章于 2023-12-25 10:35:59 发布

小千小北小乖

最新推荐文章于 2023-12-25 10:35:59 发布

阅读量7.8k

点赞数 3

分类专栏： java

本文链接：https://blog.csdn.net/qq_36750461/article/details/85051113

版权

java 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

HTML代码：
这里的原理是你输入的内容会经过处理插入到文本区域textarea中

<textarea class="layui-textarea" id="demo" name="content" style="display: none ;margin: 10px"> </textarea>

js代码：

/**
  * 文本编辑器
 */
layui.use(['form', 'layedit'], function(){
  var layedit = layui.layedit;
//上传图片,必须放在 创建一个编辑器前面
  layedit.set({
      uploadImage: {
           url: 'upload' //接口url
          ,type: 'post' //默认post
      }
  });
  //建立编辑器
  layedit.build('demo',{
	  height: 500  //设置编辑器高度
  }); 
});

后台接口代码：

/** 上传图片方法
     * @param request
     * @param description
     * @param file
     * @return
     * @throws Exception
     */
    @RequestMapping(value="upload")
    @ResponseBody
	public String uploadFile(HttpServletRequest request,@Param("file") MultipartFile file) throws IOException {
    	SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
        String res = sdf.format(new Date());
        //服务器上使用
       // String rootPath =request.getServletContext().getRealPath("/resource/uploads/");//target的目录
        //本地使用
        String rootPath ="E:\\bolg";
        //原始名称
        String originalFilename = file.getOriginalFilename();
        //新的文件名称
        String newFileName = res+originalFilename.substring(originalFilename.lastIndexOf("."));
        //新文件
        File newFile = new File(rootPath+ File.separator+newFileName);
        //判断目标文件所在的目录是否存在
        if(!newFile.getParentFile().exists()) {
            //如果目标文件所在的目录不存在，则创建父目录
            newFile.getParentFile().mkdirs();
        }
        System.out.println(newFile);
        //将内存中的数据写入磁盘
        file.transferTo(newFile);
        //完整的url
        String fileUrl =  newFileName;
        Map<String,Object> map = new HashMap<String,Object>();
        Map<String,Object> map2 = new HashMap<String,Object>();
        map.put("code",0);//0表示成功，1失败
        map.put("msg","上传成功");//提示消息
        map.put("data",map2);
        map2.put("src",fileUrl);//图片url
        map2.put("title",newFileName);//图片名称，这个会显示在输入框里
        String result = new JSONObject(map).toString();
        return result;
    }

注意：如果想在编辑器中显示你上传的图片，需要配置tomcat的虚拟路径

配置虚拟路径的方法参考这篇文章：https://blog.csdn.net/qq_36750461/article/details/85050946