前言

官方网站https://fex.baidu.com/ueditor/

1. 安装Ueditor

前往官网下载，选择发布版
选择合适的版本，如 utf8-jsp
下载，解压后目录结构如下

使用前配置

进入jsp/lib目录
在本地Maven仓库安装 ueditor jar包(如果没有使用Maven管理jar的话，需要将jar包加入项目依赖中)。

cd 目录
# 安装
mvn install:install-file -Dfile=ueditor-1.1.2.jar -DgroupId=com.baidu -DartifactId=ueditor -Dversion=1.1.2 -Dpackaging=jar

打开项目，将 utf-jsp 目录下所有内容复制到某个静态资源目录。如我这里将资源放在ueditor下。

配置ueditor资源根路径（注意：这里需要根据自己的项目的classpath情况来设置）

测试使用

参考官网https://fex.baidu.com/ueditor/#start-start

创建index文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!-- 加载编辑器的容器 --><script id="container" name="content" type="text/plain">这里写你的初始化内容</script><!-- 配置文件 --><script type="text/javascript" src="/ueditor.config.js"></script><!-- 编辑器源码文件 --><script type="text/javascript" src="/ueditor.all.js"></script><!-- 实例化编辑器 --><script type="text/javascript">var ue = UE.getEditor('container');</script></body>
</html>

访问：localhost:8080/index.html 试一试

测试图片上传

这里Ueditor中的图片上传配置文件不知道为什么，解析起来有问题。

自定义解析config.json和图片上传的方法

尝试自定义解析config.json和图片上传的方法

参考 controller.jsp文件
能够看出 ActionMap中的key 即是 /jsp/controller.jsp?action=param 的参数。
知道这一点，加上controller.jsp中的ActionEnter中的一下方法作为参考，我们就可以开始重现我们自定义的方法了
编写自定义方法代替 /jsp/controller?action=param方法


package com.bmos.ueditor.controller;import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.apache.commons.lang3.time.DateFormatUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;/*** @Author: l* @Date: 2022/3/25 13:19* @Description:*/
@Controller
@RequestMapping("/ueditor")
public class UeditorController {@RequestMapping("/invoke")public void handle(MultipartFile upfile, HttpServletRequest request, HttpServletResponse response) throws JsonProcessingException {//        response.setCharacterEncoding("utf-8");
//        response.setContentType("text/html");//1.获取action参数String action = request.getParameter("action");String result = null;//2.根据action做出相应的处理if ("config".equals(action)){// 2.1 处理读取配置文件// 我们可以将ueditor/jsp/config.json拿到我们放置配置文件的位置，如这里我将其放到resource下(最好改一下名字)//2.2 读取config.json//InputStream inputStream = UeditorController.class.getResourceAsStream("/ueditor-config.json");//InputStreamReader reader = new InputStreamReader(inputStream);//BufferedReader br = new BufferedReader(reader);StringBuilder configContent = new StringBuilder();try (BufferedReader br = new BufferedReader(new InputStreamReader(UeditorController.class.getResourceAsStream("/ueditor-config.json")))){String line = null;while ((line = br.readLine()) != null){configContent.append(line);}} catch (IOException e) {e.printStackTrace();}// 过滤输入字符串, 剔除多行注释以及替换掉反斜杠result = configContent.toString().replaceAll("/\\*[\\s\\S]*?\\*/", "").replaceAll(" ", "");}else if("uploadimage".equals(action)){//2.2 处理上传图片//参考ActionEnter invoke()方法 Uploader.doExec 其反回值格式应为：/*** 以UTF8编码为例：* {*     "state" : AppInfo.info中的某个值，如 true-对应的AppInfo.info的key为0，值为SUCCESS*     “size”  :  targetFile.length()*     "title" ： targetFile.getName()*     //下面这些只有成功才有*     “url”： PathFormat.format(savePath)*     “type”: suffix*     "original" : originFileName + suffix* }*/Map<String, Object> resultMap = new HashMap<>();ObjectMapper om = new ObjectMapper();try {//获取文件名String originalFilename = upfile.getOriginalFilename();//获取后缀String suffix = originalFilename.substring(originalFilename.indexOf(".") + 1 ,originalFilename.length());// 拼接文件名 我这里启用了一个文件服务器String realFilePath ="C:/wguo/docker-volums/tomcat/webapps/ROOT/";String url = "image/"+ DateFormatUtils.format(new Date(), "yyyy-MM-dd")+"/" + System.currentTimeMillis()+"."+suffix;File realFile = new File(realFilePath+url);if(!realFile.getParentFile().exists()){//文件夹路径不存在就新建一个realFile.getParentFile().mkdirs();}//上传文件服务器，这里就这一个服务，有条件可以重新建一个专门的文件服务器upfile.transferTo(realFile);resultMap.put("state", "SUCCESS");resultMap.put("size", upfile.getSize());resultMap.put("title", originalFilename);resultMap.put("url", "http://127.0.0.1:58080"+"/" + url);resultMap.put("title", suffix);resultMap.put("original", originalFilename);result = om.writeValueAsString(resultMap);} catch (IOException e) {e.printStackTrace();resultMap.put("state", "IO错误");result = om.writeValueAsString(resultMap);}}PrintWriter writer = null;try {writer = response.getWriter();writer.write(result);writer.flush();} catch (IOException e) {e.printStackTrace();}finally {writer.close();}}
}

Ueditor 使用相关推荐

【PHP+JS】uploadify3.2 和 Ueditor 修改上传文件大小！！
一.写在最开始: 前提条件:服务器php.ini 已经修改了变量[ upload_max_filesize ],可以设定为8M,一般8M足够用了.(重启) 1.uploadify3.2 修改文件大小: ...
thinphp 整合ueditor
我的ueditor是部署在public/editor 部署前台页面 <script type="text/javascript" > var UEDITOR_HOME_ ...
Ueditor和CKeditor 两款编辑器的使用与配置
一丶ueditor 百度编辑器 1.官方文档,演示,下载地址:http://ueditor.baidu.com/website/index.html 2.百度编辑器的好:Editor是由百度web前端 ...
ueditor与七牛云存储结合
2019独角兽企业重金招聘Python工程师标准>>> 摘要: ueditor与七牛云存储结合,主要是表单api. ueditor上传图片到七牛云存储 ueditor结合七牛传图片 ...
ueditor php 附件,ueditor单独调用上传附件和图片的功能
第一步, 引入文件第二步 html元素调用的页面: 上传图片上传文件第三步编写js代码 var _editor; $(function() { //重新实例化一个编辑器,防止在上面的edit ...
解决Chrome中UEditor插入图片的选择框加载过慢问题
解决Chrome中UEditor插入图片的选择框加载过慢问题 ../resources/plugins/ueditor/ueditor.all.js 中line24489/24498中的 accept ...
关于百度编辑器UEditor在asp.net中的使用方法！
为了完成自己想要的功能效果,在项目中使用到了百度编辑器,为了搞明白,苦心学习查资料搞了整整一天,总结一下. 在asp.net 的项目中目前我觉得有两种情况,一种是没有使用模板页的,一种是使用了模板页的 ...
ueditor编辑器和at.js集成
源码: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8&qu ...
百度UEditor开发案例（JSP）
本案例的开发环境:MyEclipse+tomcat+jdk 本案例的开发内容: 用百度编辑器发布新闻(UEditor的初始化开发部署) 编辑已发过的新闻(UEditor的应用--编辑旧文章) 上传附件 ...
laravel-admin集成ueditor编辑器的图片列表显示问题解决方法
laravel-admin集成ueditor推荐使用laravel-u-editor,它是ueditor的laravel composer版本.基于UEditor 1.4.3.3开发,支持en.zh_ ...

Ueditor 使用

前言

1. 安装Ueditor

使用前配置

测试使用

测试图片上传

自定义解析config.json和图片上传的方法

Ueditor 使用相关推荐

最新文章

热门文章