百度UEditor富文本上传图片

项目中使用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": "/{yyyy}{mm}{dd}/{time}{rand: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();
    }

图片上传成功

原文地址:https://www.cnblogs.com/chengmi/p/10847556.html

时间: 2024-10-10 19:41:42

百度UEditor富文本上传图片的相关文章

ASP.NET MVC5 中百度ueditor富文本编辑器的使用

随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor,另一种是ueditor的迷你版umeditor. 一.我们先讲完全版的ueditor. 1.建立数据模型. 2.建立对应的控制器和视图. 3.访问http://ueditor.baidu.com/website/download.html 进入开发版的下载页面,下载.net UTF-8版本,现在最新

django之百度Ueditor富文本编辑器后台集成

Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因为百度富文本编辑器Ueditor没有对python的支持 步骤1: 在官网下载Ueditor的任意版本代码:http://ueditor.baidu.com/website/download.html#ueditor 步骤2: 将下载的代码放入到 django 项目中 步骤3:前端引用 在前端HTM

PHP如何搭建百度Ueditor富文本编辑器

本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor 第一步 引入javascript 在html中如入下面的js语句引入相关文件 ? 1 2 <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ued

spring boot 整合 百度ueditor富文本

百度的富文本没有提供Java版本的,只给提供了jsp版本,但是呢spring boot 如果是使用内置tomcat启动的话整合jsp是非常困难得,今天小编给大家带来spring boot整合百度富文本需要做哪些 1.先将百度提供的demo和js导入项目中 2.编写html 这步创建好了编辑器然后我们会发现图片不能上传 出现这个问题之后我们去config.json里面修改 ueditor.config.js修改 去编写ueditor.config.js指向的controller 然后去重写百度的放

vue集成百度UEditor富文本编辑器

在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是我将百度富文本编辑器放到vue项目中使用.效果图如下 废话不多说. 1.使用vue-cli构建一个vue项目.然后下载UEditor源码.地址:http://ueditor.baidu.com/website/ 把项目复制到vue项目的static文件下.目的是让服务可以访问到里面的文件,打开UEd

reactjs 中使用百度Ueditor富文本编辑器

import React from 'react'; var Ueditor = React.createClass({ componentDidMount(){ var editor = UE.getEditor(this.props.id, { //工具栏 toolbars: [[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethro

php如何引入百度Ueditor富文本编辑器

文本编辑器插件内容丰富,比起传统的textarea标签输入要好用很多,看看如何在页面实现引入吧 1.下载适合的资源包(可以去官网下载适合的版本),我是php引入 2.下载后解压放到一个位置.(我用的是TP框架,所以我放在了我的指定公共文件夹Pbulic下) 3.在页面中引入 首先在head标签里写引入资源包的路径,路径要写自己存放资源包的路径 <script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.c

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

最近在工作中用到了ueditor,这个最开始不是我接入到后台管理系统的,我半路接手,百度官方给的文档又写的很一般,不易理解,所以有很多问题解决的很麻烦. 在使用ueditor过程中,目前遇到的一些问题: 我们公司运营需要用ueditor实现微信公众号文章的编写,之前她们是直接把微信公众号文章复制到ueditor编辑器中,这样子是可以直接使用的.这样带来的一个问题是, 如果文章里有视频播放的话,视频的播放源全都是腾讯视频,我们公司商务反对了这种行为,所以运营提出文章内的视频由本地上传或者使用第三方

百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

====================================================================== [百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明] ----by 夏春涛 2014-02-20 ====================================================================== 运行环境: ueditor-v1.3.6-utf8-net,VS2010旗舰版+SP1,