百度ueditor富文本上传图片(代码片段)

chengmi chengmi     2022-12-08     477

关键词:

项目中使用UEditor发现设置图片自定义保存路径会出现《请求后台配置项http错误,上传功能将不能正常使用!错误》

 /* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "inputForm", /* 提交的图片表单名称 */
    "imageMaxSize": 1024000, /* 上传大小限制,单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "/cms/static/userfiles/", /* 图片访问路径前缀 */
    "imagePathFormat": "/yyyymmdd/timerand:6", /* 上传保存路径,可以自定义保存路径和文件名格式 */

原因在于UEditor提供的 ueditor-1.1.2.jar 之中的 ConfigManager 类获取不到 config.json 文件

 

技术图片

上传图片会获取controller.jsp地址

 //ueditor.config.js

var URL = window.UEDITOR_HOME_URL || getUEBasePath(); /** * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。 */ window.UEDITOR_CONFIG = //为编辑器实例添加一个路径,这个不能被注释 UEDITOR_HOME_URL: URL // 服务器统一请求接口路径 , serverUrl: URL + "jsp/controller.jsp"

执行controller.jsp,rootPath 是要保存图片的路径

//controller.jsp
<%

    request.setCharacterEncoding( "utf-8" );
    response.setHeader("Content-Type" , "text/html");

    String rootPath = application.getRealPath( "/" );
    out.write( new ActionEnter( request, rootPath ).exec() );

%>
修改后
<%

    request.setCharacterEncoding("utf-8");
    response.setHeader("Content-Type", "text/html");
//    String rootPath = application.getRealPath( "/" );
    String rootPath = Global.getConfig("userfiles.basedir");//图片保存目录,会与imagePathFormat拼接起来,此为主要保存路径,imagePathFormat可以只设置图片名称
    String jsonPath = Global.getConfig("userfiles.jsonPash"); //config.json 目录
    out.write(new ActionEnter(request, rootPath, jsonPath).exec());
%>


ActionEnter执行了 ConfigManager.getInstance 传入了 request.getRequestURI()
request.getRequestURI()获取的是 controller.jsp文件的相对路径
 
//ActionEnter类
public ActionEnter(HttpServletRequest request, String rootPath) 
        this.request = request;
        this.rootPath = rootPath;
        this.actionType = request.getParameter("action");
        this.contextPath = request.getContextPath();
        this.configManager = ConfigManager.getInstance(this.rootPath, this.contextPath, request.getRequestURI());
    

修改后

 public ActionEnter(HttpServletRequest request, String rootPath, String jsonPath) 
        this.request = request;
        this.rootPath = rootPath;
        this.actionType = request.getParameter("action");
        this.contextPath = request.getContextPath();
        this.configManager = ConfigManager.getInstance(this.rootPath, this.contextPath, jsonPath);
    

 

此时 ConfigManager 方法用你的图片保存路径加上 controller.jsp 的相对路径去找 config.json,就出现找不到的情况,可以修改jar包,把 request.getRequestURI()更改为变量,以传参方式把地址传进来,再把if去掉,直接使用传 uri 给 File


//ConfigManager类
public final class ConfigManager 
    private final String rootPath;
    private final String originalPath;
    private final String contextPath;
    private static final String configFileName = "config.json";
    private String parentPath = null;
    private JSONObject jsonConfig = null;
    private static final String SCRAWL_FILE_NAME = "scrawl";
    private static final String REMOTE_FILE_NAME = "remote";
  
    private ConfigManager(String rootPath, String contextPath, String uri) throws FileNotFoundException, IOException 
        rootPath = rootPath.replace("\\\\", "/");
        this.rootPath = rootPath;
        this.contextPath = contextPath;
        if (contextPath.length() > 0) 
            this.originalPath = this.rootPath + uri.substring(contextPath.length());
         else 
            this.originalPath = this.rootPath + uri;
        

        this.initEnv();
    

    public static ConfigManager getInstance(String rootPath, String contextPath, String uri) 
        try 
            return new ConfigManager(rootPath, contextPath, uri);
         catch (Exception var4) 
            return null;
        
    
  //获取 config.json
    private void initEnv() throws FileNotFoundException, IOException 
        File file = new File(this.originalPath);
        if (!file.isAbsolute()) 
            file = new File(file.getAbsolutePath());
        

        this.parentPath = file.getParent();
        String configContent = this.readFile(this.getConfigPath());

        try 
            JSONObject jsonConfig = new JSONObject(configContent);
            this.jsonConfig = jsonConfig;
         catch (Exception var4) 
            this.jsonConfig = null;
        

    
  //获取 config.json 路径
    private String getConfigPath() 
        return this.parentPath + File.separator + "config.json";
    

 修改后

private ConfigManager(String rootPath, String contextPath, String jsonPath) throws FileNotFoundException, IOException 
        rootPath = rootPath.replace("\\\\", "/");
        this.rootPath = rootPath;
        this.contextPath = contextPath;
        this.originalPath = jsonPath;
        this.initEnv();
    

 

图片上传成功

技术图片

 

百度富文本编辑器ueditor自定义上传图片接口

如下图: 然后修改ueditor.all.js   查看详情

django之百度ueditor富文本编辑器后台集成(代码片段)

Python3+Django2.0百度Ueditor富文本编辑器的集成百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成?答案:因为百度富文本编辑器Ueditor没有对python的支持 步骤1:  在官网下载Ueditor的任意版本代... 查看详情

百度富文本ueditor编辑器的使用(代码片段)

...富文本编辑器,这里我们来使用百度提供的富文本编辑器UEditor,以提高我们的开发效率UEditor官网下载地址:https://ueditor.baidu.com/website/download.html 这里我下载的是jsp版本中的UTF-8版,然后将压缩包解压之后是这个样子解压内容... 查看详情

springboot整合百度ueditor富文本

  百度的富文本没有提供Java版本的,只给提供了jsp版本,但是呢springboot如果是使用内置tomcat启动的话整合jsp是非常困难得,今天小编给大家带来springboot整合百度富文本需要做哪些  1.先将百度提供的demo和js导入项目中 2.编... 查看详情

百度富文本(ueditor)选择图片慢

ueditor.all.js/ueditor.all.min.js中修改如下信息将:accept="image/*"修改为:accept="image/jpg,image/jpeg,image/png,image/bmp,image/gif"  查看详情

springmvc--对接ueditor(富文本编辑器)(代码片段)

工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示: 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题。 一种方式是直接修改源码... 查看详情

在vue2.0中集成ueditor富文本编辑器(代码片段)

...片上传和视频上传的支持并不是很好,最终还是决定使用UEditor。这类的文章网上有很多,我进行了摸索、手写代码、汇总、排版,形成了这篇文章。下载对应的UEditor源码首先,去官网上下载UEditor的源码,根据你后台语言的不同... 查看详情

百度富文本编辑器ueditor添加到pom(代码片段)

...lt;dependency><groupId>com.baidu</groupId><artifactId>ueditor</artifactId><version>1.1.2</version><scope>system</scope><systemPath>$project.basedir/src/main/webapp/WEB-INF/lib/ueditor-1.1.2.jar</systemPath></dependency>由于富文... 查看详情

百度富文本编辑器的使用(代码片段)

...肯定不够用,现在看看功能强大的富文本编辑框吧1.ueditor官方地址:http://ueditor.baidu.com/website/index.html  开发文档地址:  http://ueditor.baidu.com/website/document.ht 查看详情

百度富文本框ueditor(代码片段)

官网http://ueditor.baidu.com/website/index.html下载官网下载JSP版本,1.4.3.3的UTF-8版本使用解压后重命名为ueditor,放入WEB-INF/plugin文件夹下面。把jsp中的两个lib包放入项目lib中。 因为在WEB-INF不可以直接访问,所以要在springmvc.xml中配置... 查看详情

新手如何在vue项目中优雅的使用ueditor(百度富文本编辑器)(代码片段)

1、去官网,下载ueditor,解压,重命名,放在vue项目中的static文件夹下。  ps:新手会觉得在官网上有几种不同版本的文件,俺到底要下载哪一个,如果你仅仅是一个前端,那么好,只要是最新版本的UEditor,随便下,如果你比... 查看详情

使用百度umeditor富文本编辑器,修改自定义图片上传,修改源码

...,现在改名了,比较流行的一个插件,国外很多公司在用UEDITOR:百度开发的插件,lite版是UMEasyUI编辑器:用easyUI的都懂,基本上肯定用到其他的富文本编辑器就不说了,前两个小编我用的比较多本来我是比较倾向于CKEditor,但是... 查看详情

vuequilleditor自定义图片/视频上传(elementui+oss)字体字体大小段落等(代码片段)

...用富文本编辑器,开始想到的富文本编辑器是百度的UEditor,UEditor功能齐全、插件多,但是图片只能上传到本地服务器,如果需要上传到其他服务器需要改动源码,而且是PHP、JSP、ASP、.Net版本,同时UEditor... 查看详情

ueditor编辑器怎么调用

ueditor编辑器的调用方法:1、官方下载最新ASP版本,解压后文件夹自行修改,建议放在根目录下。2、用记事本打开\\bdu123\\asp\\config.json文件,修改里面图片、音乐、附件等的上传地址,../../upload代表上传的图片将自动放在网站根... 查看详情

类百度富文本编辑器文件上传。(代码片段)

在项目安开发中,有一个需求是用户需上传特定的text文件,根据此文件判断设备的状态。以上是需求,此时需要在页面上用到文件上传的功能,原始的文件上传样式不好看,自己此段时间一直都在用layui前端框架写页面,本想用... 查看详情

ueditor富文本编辑器时,插入图片没有任何反应(代码片段)

1、信息:Unabletofind‘struts.multipart.saveDir‘propertysetting.Defaultingtojavax.servlet.context.tempdir这是struts需要在struts.xml配置临时文件夹。只需要在struts.xml的<struts></struts>中添加一下语句即可。<constantname= 查看详情

百度ueditor富文本编辑器上传视频设置封面和禁止视频全屏下载功能

最近在工作中用到了ueditor,这个最开始不是我接入到后台管理系统的,我半路接手,百度官方给的文档又写的很一般,不易理解,所以有很多问题解决的很麻烦。在使用ueditor过程中,目前遇到的一些问题:我们公司运营需要用u... 查看详情

djangoxadmin集成djangoueditor富文本编辑器(代码片段)

本文档记录自己的学习历程!介绍UeditorHTML编辑器是百度开源的在线HTML编辑器,功能非常强大额外功能解决图片视频等无法上传显示问题Ueditor下载地址https://github.com/wsqy/DjangoUeditor.git解压后将DjangoUeditor文件夹复制到django项目目录... 查看详情