富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器． 

CSDN的markdown编辑器便是一种富文本编辑器．

　　蓝莓商城商品详情这一部分的编辑需要使用富文本编辑器．本来想使用百度的ueditor的，但是弄了好久依然还是有问题．所以就放弃了．ueditor配置确实比较复杂，官方的文档也没有很好的说清楚，错误提示不够明了，出错时未提示具体的原因．

　　最后找到这个wangEditor.相比ueditor，配置更加简单，使用更加方便．其功能虽不及ueditor多，但是应付一般的需求足够了． 

　
流程说明
 

　由于对于图片上传整个流程比较复杂，所以本文仅对其进行说明． 

　图片上传的流程是，当页面选择图片后，将会创建XMLHttpRequest请求，将图片数据发送给服务端，服务端接收后将图片保存到本地，再将图片路径返回给客户端，客户端接收到图片路径后，创建元素，并将图片路径赋给src，最后再把该元素插入到编辑器中． 

　




 // 定义 xhr　发送请求给服务端
  var xhr = new XMLHttpRequest();
   xhr.open('POST', uploadImgServer);

客户端配置说明

下载

直接下载：https://github.com/wangfupeng1988/wangEditor/releases 

使用npm下载：npm install wangeditor （注意 wangeditor 全部是小写字母） 

使用bower下载：bower install wangEditor （前提保证电脑已安装了bower） 

使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js

调试阶段推荐使用方式１中的未压缩版本，因为如果出现问题也好调试和查找． 

下载后将目录里的wangEditor.js放入工程目录中．只需要这个文件，其他的不需要． 

 

我放在webapp下的wangEditor路径下． 



前端配置

引入js文件 

contextPathOfStatic这里是我的项目路径下的static文件夹：http://localhost:8080/lanmei-os/static



<script type="text/javascript" src="${contextPathOfStatic}/wangEditor/wangEditor.js"></script>

jsp页面添加



<div id="editor">
　<!-- 默认显示 -->
   <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>

这里我创建３个按钮进行测试



<button id="editorSetBtn">设置内容</button>
<button id="editorGetBtn1">获取内容1</button>
<button id="editorGetBtn2">获取内容2</button>

js文件编写



$(function(){

    var E = window.wangEditor;
    //这里的id为<div id="editor"中的id.
    var editor = new E('#editor');
    // 配置服务器端地址,也就是controller的请求路径，不带项目路径，前面没有/
    editor.customConfig.uploadImgServer = 'commodity/upload/editor/img';
    //配置属性名称，绑定请求的图片数据
    //controller会用到，可以随便设置，但是一定要与controller一致
    editor.customConfig.uploadFileName = 'img';
    //创建编辑器
    editor.create();

    $("#editorSetBtn").click(function(){
        //这是设置编辑器内容
        editor.txt.html("dsafdfadsfdafdsfds");
    })
     $("#editorGetBtn1").click(function(){
     　//获取编辑器的内容，带样式
     　//一般使用这个获取数据，通过ajax发送给服务端　，然后服务端以Ｓtring接收，保存到数据库．
         alert(editor.txt.html());
    })
     $("#editorGetBtn2").click(function(){
    　　　 //获取编辑器的内容，不带样式，纯文本
         alert(editor.txt.text());
    })
})

程序加载完之后页面就会出现编辑器． 



客户端设置完成

 服务端配置

 WEB层创建Controller



@Controller
@RequestMapping(path="/commodity")
public class CommodityController {
    @Autowired
    AddCommodityService   addCommodityService;
    @Autowired
private static final Logger logger = LoggerFactory.getLogger("CommodityController.class");
    @ResponseBody
    @RequestMapping(path="/upload/editor/img")
    //RequestParam中的属性名称要和前端定义的一致，上面说明了．所以写"img"
    //使用List<MultipartFile>进行接收
    //返回的是一个Ｄto类，后面会说明，使用@ResponseBody会将其转换为Ｊson格式数据
    public ImgResultDto uploadEditorImg(@RequestParam("img") List<MultipartFile> list) {    
        //这里是我在web中定义的两个初始化属性，保存目录的绝对路径和相对路径，你们可以自定义    
        String imgUploadAbsolutePath = request.getServletContext().getInitParameter("imgUploadAbsolutePath");
        String imgUploadRelativePath = request.getServletContext().getInitParameter("imgUploadRelativePath");

    　　//服务曾处理数据，返回Dto
        ImgResultDto imgResult
                = addCommodityService.upLoadEditorImg(list, imgUploadAbsolutePath, 
                                                imgUploadRelativePath,1);
            return imgResult;           
    }

}

 服务层创建Service类

 服务层创建Service接口类


public interface AddCommodityService {
    /**
     * 上传商品图片
     * @param files
     */
    ImgResultDto upLoadEditorImg(List<MultipartFile> list,
            String UploadAbsolutePath,
            String UploadRelativePath,
            int commodityId);
}

 服务层创建Ｓervice接口实现类

这里需要注意的是保存地址，我是保存在项目路径下，有的会保存在文件系统根目录下，比如windows可能是D://xxx/xx,linux是/xx/xx,那么返回给客户端的地址就会不一样．需要根据实际情况设置

public class AddCommodityServiceImpl extends BaseService  implements AddCommodityService{
    @Autowired
    private CommodityMapper commodityMapper;
    @Autowired
    CommodityImageMapper commodityImageMapper;
    @Autowired
    private DruidDataSource dataSource; 
    @Autowired
    private SqlSessionFactoryBean sqlSessionFactory;
/**
     * 图片上传处理
     */
    @Override
    public ImgResultDto upLoadEditorImg(List<MultipartFile> list,
            String UploadAbsolutePath,
            String UploadRelativePath,
            int commodityId) {

        //获取当前登录的管理员
        //CmsAdmin admin = (CmsAdmin) SessionUtils.getSession("currenLogintAdmin");
        CmsAdmin admin = new CmsAdmin("测试用户");
        //工程绝对路径
        String imgUploadAbsolutePath = UploadAbsolutePath;
        //工程相对路径
        String imgUploadRelativePath = UploadRelativePath;
        logger.debug("files.length = " + list.size() );
        ImgResultDto imgResultDto = new ImgResultDto();
        //这里定
        String[] urlData = new String[5];
        int index = 0;
        try {
            for(MultipartFile img : list) {
            　　//获取原始文件名，比如你上传的是　图片．jpg,则fileName＝图片．jpg
                String fileName = img.getOriginalFilename();
                if(fileName == "") {
                    continue;
                }
                logger.debug("file  name = " + fileName);
                String finalPath = imgUploadAbsolutePath + imgUploadRelativePath;  //绝对路径　＋　相对路径
                //为了保证文件名不一致，因此文件名称使用当前的时间戳和4位的随机数，还有原始文件名组成
                //觉得实际的企业开发不应当使用原始文件名，否则上传者使用一些不好的名字，对于下载者就不好了．
                //这里为了调试方便，可以加上．
                String finalFileName =  (new Date().getTime()) + Math.round(Math.random() * 1000)  //文件名动态部分
                                    + fileName; //文件名　原始文件名        
                File newfile = new File( finalPath + finalFileName);
                logger.debug("创建文件夹　= " + newfile.mkdirs() +  "  path = " + newfile.getPath());
                logger.debug("" + newfile.getAbsolutePath());
                //保存文件到本地
                img.transferTo(newfile);
                logger.debug("上传图片成功");
                //持久化到数据库
                CommodityImage commodityImage = new  CommodityImage(commodityId, imgUploadRelativePath,
                        finalFileName,(byte)(0),admin.getLoginJobnum(), new Date());

                commodityImageMapper.insert(commodityImage);
                logger.debug("数据库写入图片成功");  
                //这里的路径是项目路径＋文件路径＋文件名称
                //这么写不是规范的做法，项目路径应是放在前端处理，只需要发送相对路径和文件名称即可，项目路径由前端加上．
                urlData[index++] = "http://localhost:8080/lanmei-cms/"+imgUploadRelativePath + finalFileName;
                logger.debug("index = " + index 
                        + "  url = " + urlData[0]);
                //设置异常代号
                imgResultDto.setErrno(0);
            }
            imgResultDto.setData(urlData);
            //返回Ｄto
            return imgResultDto;
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
            return imgResultDto;
        }

    }

}

Dto编写

Dto 只是一个普通的pojo类，没有业务方法，只有属性和构造器，getter and setter．主要用于层间传输数据，更详细的说明自行百度．



public class ImgResultDto<T> {

    private int  errno;//错误代码

    private String[] data;//存放数据
    //构造器
    //getter and setter
｝

前端接收处理

添加 customInsert: function (insertImg, result, editor)这段程序 

result是返回的json数据 

因为上面只是上传了一张图片，保存在数组索引0里 

因此通过下面获取图片地址． 

var url = result.data[0];



    // 上传图片 hook 
    uploadImgHooks: {

        before: function before(xhr, editor, files) {
            // 图片上传之前触发

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
        },
        success: function success(xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            console.log("插入图片成功　success result = " + result.errno + "  path = " + result.data[0] );
        },
        fail: function fail(xhr, editor, result) {
            console.log(" fail result = " + result.errno + "  path = " + result.data[0] );
            // 图片上传并返回结果，但图片插入错误时触发
        },
        error: function error(xhr, editor) {
            // 图片上传出错时触发
            console.log("error result = " + result.errno + "  path = " + result.data[0] );
        },
        timeout: function timeout(xhr, editor) {
            // 图片上传超时时触发
            console.log("timeout result = " + result.errno + "  path = " + result.data );
        },

       // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置　
        //--------------添加这段程序－－－－－－－－－－－－－－－－－－
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：

            //－－－－－－－－－－－修改这里－－－－－－－－－－－－－－－－－－
            //获取返回的图片地址
            var url = result.data[0];

            insertImg(url);

            console.log("插入图片 url = " + url );
            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
    },

    // 是否上传七牛云，默认为 false
    qiniu: false

};

完成！！！！！！！！！！！！！！！！！

总结

　　本文说明了如何在Java WEB项目中使用富文本编辑器wangEditor,包括前端配置和后端处理．仅说明其简单的用法，业务也未考虑的很周详．更多功能扩展请看官方的说明． 

　　项目的完整程序请看蓝莓商城项目，后面我会陆续完善．

一、在后台打开百度的编辑器显示下图



二、访问UEditor富文本编辑器以下这个文件  /ueditor/php/controller.php  是否返回以下



三、再次访问UEditor富文本编辑器 /ueditor/php/controller.php?action=config 返回以下错误



出现在以上三个问题，可以确认是UEditor富文本编辑器   /ueditor/php/controller.php  这个文件下的这个
$CONFIG = json_decode(preg_replace("//*[\s\S]+?*//", “”, file_get_contents(“config.json”)), true);

引入config.json路径错误造成的



修改如下
$CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents($_SERVER['DOCUMENT_ROOT']."/public/static/ueditor/php/config.json")), true);



$_SERVER[‘DOCUMENT_ROOT’]."/public/static/ueditor/php/config.json"   是config.json这个文件的绝对路径

springboot+vue集成百度富文本编辑器ueditor+后端上传图片配置
先来一张效果图

开始
1、下载UEditor官网最新的jsp版本的包，下载完成解压之后得到一个utf8-jsp的文件夹，里面包含的内容如下：

下载地址：https://ueditor.baidu.com/website/download.html。这里下载的是jsp版本。

除了jsp文件夹和index.html文件外，把所有的文件都复制到前台目录下的static里文件夹里，如下图：

2.编辑 UEditor 编辑器 配置文件

我们打开 ueditor.config.js，修改其中的window.UEDITOR_HOME_UR配置，如下：

window.UEDITOR_HOME_URL = “/static/UE/”;     //指定编辑器资源文件根目录

var URL = window.UEDITOR_HOME_URL || getUEBasePath();
ueditor.config.js文件有很多配置，可以在这里进行一些初始化的全局配置，比如编辑器的默认宽高等：

,initialFrameWidth:1000  //初始化编辑器宽度,默认1000

,initialFrameHeight:320  //初始化编辑器高度,默认320

其他的参数配置，在该文件中有详细列出，或者参考官方文档 http://fex.baidu.com/ueditor/
3.将编辑器集成到系统中

打开 /src/main.js 文件，插入下面的代码：
import ‘…/static/UE/ueditor.config.js’

import ‘…/static/UE/ueditor.all.min.js’

import ‘…/static/UE/lang/zh-cn/zh-cn.js’

import ‘…/static/UE/ueditor.parse.min.js’
4.开发公共组件 UE.vue

我们在 /src/components/ 目录下创建 UE.vue文件，作为我们的编辑器组件文件。

下面代码提供简单功能，具体使用根据需求完善该组件即可。
<template>
    <div>
        <script id="editor" type="text/plain"></script>
    </div>
</template>
<script>
  import '../../static/UE/ueditor.config.js'
  import '../../static/UE/ueditor.all.js'
  import '../../static/UE/lang/zh-cn/zh-cn.js'

    export default {
        name: 'ue',
        data () {
            return {
                editor: null
            }
        },
        props: {
            defaultMsg: {
                type: String
            },
            config: {
                type: Object,
                serverUrl:"/baseApi/file/uploadFile",
                // ,
                UEDITOR_HOME_URL: '/static/UE/'
            },
            id: {
                type: String
            },
            
        },
        mounted () {
            const _this = this; 
            this.editor = window.UE.getEditor('editor', this.config); // 初始化UE
            //初始化UE
            // const _this = this;
            // this.editor = UE.delEditor("editor");
            // this.editor = UE.getEditor('editor',this.config);

            // this.editor = window.UE.getEditor('editor', this.config);
            // this.editor.addListener('ready',  () => {
            //     this.editor.setContent(this.value)
            // })
        },
        methods: {
            getUEContent () {
                return this.editor.getContent()
            },
            getContentTxt () {
                return this.editor.getContentTxt()
            },
            setUEContent (value) {
                // this.editor.addListener('ready',  (value) => {
                //     this.editor.setContent(value)
                // })
                this.editor.setContent(value)
            },
            init(){
                const _this = this; 
                this.editor = window.UE.getEditor('editor', this.config); // 初始化UE
            }
        },
        destroyed () {
            this.editor.destroy()
        }
    }
</script>
<style lang="scss" scoped>
  .edit{
    width: 1200px;
    margin: auto;
  }
</style>

5.在其他页面中使用该组件

简单地创建一个需要UEditor的页面，再该页面中使用刚才封装好的UE.vue组件：
<template>
<div>
    <div class="components-container" style="position:relative;top:50px;">
      <div class="editor-container">
     	 <Uediter style="overflow:auto;height:650px;" :defaultMsg=defaultMsg :config=config ref="ue"></Uediter>
      </div>
      <div slot="footer" class="dialog-footer">
          <el-button class="buttons" @click="isConcel">取 消</el-button>
          <el-button class="buttons" type="primary" @click="isOk">确 定</el-button>
      </div> 
    </div>
</div>
</template>

<script>
  import Uediter from '@/components/UE.vue';
  import qs from 'qs'
  import axios from 'axios'

  export default {
    components:{
      Uediter
    },
    data (){
      return{
        defaultMsg: '这里是UE',
        config: {
            initialFrameWidth: 1000,
            initialFrameHeight: 500
        }
      }
    },
    mounted(){

	},
    methods: {
		returnContent () {
			var content=this.$refs.ue.getUEContent();     //获取ueditor编辑器的html内容
            this.$refs.ue.setUEContent(“”)            	  //设置ueditor编辑器的内容
        	this.$refs.ue.getContentTxt ()                //获取ueditor编辑器的文本内容
        }
      
  	}

</script>
<style scoped>
  .div1{
    background-image:url('https://park.zmzncs.com/images/2019816/introduc.png');
    background-repeat:no-repeat; height:600px;
    position: relative;top: 100px;
    overflow: auto
  }
</style>

6.配置完上述内容后，控制台可能会出现"后台配置项返回格式出错，上传功能将不能正常使用！“的报错，

我们在编辑器中上传图片或者视频，也会出现响应的报错，这是因为没有配置服务器的请求接口，在ueditor.config.js中，对serverUrl进行配置：

// 服务器统一请求接口路径

, serverUrl:”/baseApi/ueditor/exec"  //连接后台的接口（/baseApi/为后台跨域的代理接口）
7.前端配置到这里就可以，剩下的是后端配置

idea  的pom文件导入一下jar包
		<dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.10</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20180130</version>
        </dependency>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3</version>
        </dependency>
        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>

   将jsp目录下的lib目中的ueditor.jar文件中的所有类全部拿出来（具体方式自己决定，反编译工具或者拿到源码都可以）,放到后端项目中，然后将config.json放到项目的resources中，如下图：





然后在control层新建一个UeditorController.java的类，如下：

其中  public String exec(HttpServletRequest request) throws UnsupportedEncodingException {｝get请求为editor初始化， public Map<String, String> execPost(HttpServletRequest request, HttpServletResponse response) throws IOException {｝post请求为上传图片接口，

前端ueditor.config.js中，对serverUrl进行配置：

// 服务器统一请求接口路径

, serverUrl:"/baseApi/ueditor/exec"  //此接口就是下面写的controller内的接口。
ResponseObject responseObject=fileManagerController.uploadFile(request);这个为调用的上传图片具体逻辑的方法
@RestController
@CrossOrigin
@RequestMapping("/api/ueditor")
public class UeditorController {
    @Autowired
    private FileManagerController fileManagerController;

    @RequestMapping(value = "/exec", method = RequestMethod.GET)
    public String exec(HttpServletRequest request) throws UnsupportedEncodingException {
        request.setCharacterEncoding("utf-8");
        String rootPath = request.getRealPath("/");
        return new ActionEnter( request, rootPath ).exec();
    }
    @RequestMapping(value = "/exec", method = RequestMethod.POST)
    public Map<String, String> execPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
        request.setCharacterEncoding("utf-8");
//        response.setHeader("Content-Type","test/html");
        response.setContentType("text/html;charset=utf-8");
        String rootPath = request.getRealPath("/");
        new ActionEnter( request, rootPath ).exec();
        ResponseObject responseObject=fileManagerController.uploadFile(request);
        Map map=(Map) responseObject.getData();
        String title=String.valueOf(map.get("fileName"));
        String group=String.valueOf(map.get("cruSavePath"));
        String url=String.valueOf(map.get("cruUrlPath"));
        Map<String,String> map1=new HashMap();
        map1.put("title",title);
        map1.put("group",group);
        map1.put("url",url);
//        map1.put("type",".jpg");
        map1.put("state","SUCCESS");
//        map1.put("size","0");
        map1.put("original",title);
        Object o = JSONObject.toJSON(map1);
        System.out.println(o);
//        return o.toString();
        return map1;
    }

    @RequestMapping(value="/config",method = RequestMethod.GET)
    public void config(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");

        String rootPath = request.getSession().getServletContext().getRealPath("/");
        try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch(IOException e) {
            e.printStackTrace();
        }
    }
}

最后  后台代码打包到服务器，还需创建UeditorConfig类并修改ConfigManager.java这个类的

initEnv（）方法来解决把项目打成jar包后读取不到config.json配置文件的问题
package com.zm.homeapi.common.ueditor.config;

public final class UeditorConfig {

    public static String configContent = "/*前后端通信相关的配置,注释只允许使用多行方式*/"+
            "{"+
            "/*上传图片配置项*/"+
            "\"imageActionName\":\"uploadimage\",/*执行上传图片的action名称*/"+
            "\"imageFieldName\":\"upfile\",/*提交的图片表单名称*/"+
            "\"imageMaxSize\":2048000,/*上传大小限制，单位B*/"+
            "\"imageAllowFiles\":[\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\"],/*上传图片格式显示*/"+
            "\"imageCompressEnable\":true,/*是否压缩图片,默认是true*/"+
            "\"imageCompressBorder\":1600,/*图片压缩最长边限制*/"+
            "\"imageInsertAlign\":\"none\",/*插入的图片浮动方式*/"+
            "\"imageUrlPrefix\":\"\",/*图片访问路径前缀*/"+
            "\"localSavePathPrefix\":\"\",/*图片访问路径前缀*/"+
            "\"imagePathFormat\":\"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
            "/*{filename}会替换成原文件名,配置这项需要注意中文乱码问题*/"+
            "/*{rand:6}会替换成随机数,后面的数字是随机数的位数*/"+
            "/*{time}会替换成时间戳*/"+
            "/*{yyyy}会替换成四位年份*/"+
            "/*{yy}会替换成两位年份*/"+
            "/*{mm}会替换成两位月份*/"+
            "/*{dd}会替换成两位日期*/"+
            "/*{hh}会替换成两位小时*/"+
            "/*{ii}会替换成两位分钟*/"+
            "/*{ss}会替换成两位秒*/"+
            "/*非法字符\\:*?\"<>|*/"+
            "/*具请体看线上文档:fex.baidu.com/ueditor/#use-format_upload_filename*/"+
            ""+
            "/*涂鸦图片上传配置项*/"+
            "\"scrawlActionName\":\"uploadscrawl\",/*执行上传涂鸦的action名称*/"+
            "\"scrawlFieldName\":\"upfile\",/*提交的图片表单名称*/"+
            "\"scrawlPathFormat\":\"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
            "\"scrawlMaxSize\":2048000,/*上传大小限制，单位B*/"+
            "\"scrawlUrlPrefix\":\"\",/*图片访问路径前缀*/"+
            "\"scrawlInsertAlign\":\"none\","+
            ""+
            "/*截图工具上传*/"+
            "\"snapscreenActionName\":\"uploadimage\",/*执行上传截图的action名称*/"+
            "\"snapscreenPathFormat\":\"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
            "\"snapscreenUrlPrefix\":\"\",/*图片访问路径前缀*/"+
            "\"snapscreenInsertAlign\":\"none\",/*插入的图片浮动方式*/"+
            ""+
            "/*抓取远程图片配置*/"+
            "\"catcherLocalDomain\":[\"127.0.0.1\",\"localhost\",\"img.baidu.com\"],"+
            "\"catcherActionName\":\"catchimage\",/*执行抓取远程图片的action名称*/"+
            "\"catcherFieldName\":\"source\",/*提交的图片列表表单名称*/"+
            "\"catcherPathFormat\":\"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
            "\"catcherUrlPrefix\":\"\",/*图片访问路径前缀*/"+
            "\"catcherMaxSize\":2048000,/*上传大小限制，单位B*/"+
            "\"catcherAllowFiles\":[\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\"],/*抓取图片格式显示*/"+
            ""+
            "/*上传视频配置*/"+
            "\"videoActionName\":\"uploadvideo\",/*执行上传视频的action名称*/"+
            "\"videoFieldName\":\"upfile\",/*提交的视频表单名称*/"+
            "\"videoPathFormat\":\"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
            "\"videoUrlPrefix\":\"\",/*视频访问路径前缀*/"+
            "\"videoMaxSize\":102400000,/*上传大小限制，单位B，默认100MB*/"+
            "\"videoAllowFiles\":["+
            "\".flv\",\".swf\",\".mkv\",\".avi\",\".rm\",\".rmvb\",\".mpeg\",\".mpg\","+
            "\".ogg\",\".ogv\",\".mov\",\".wmv\",\".mp4\",\".webm\",\".mp3\",\".wav\",\".mid\"],/*上传视频格式显示*/"+
            ""+
            "/*上传文件配置*/"+
            "\"fileActionName\":\"uploadfile\",/*controller里,执行上传视频的action名称*/"+
            "\"fileFieldName\":\"upfile\",/*提交的文件表单名称*/"+
            "\"filePathFormat\":\"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
            "\"fileUrlPrefix\":\"\",/*文件访问路径前缀*/"+
            "\"fileMaxSize\":51200000,/*上传大小限制，单位B，默认50MB*/"+
            "\"fileAllowFiles\":["+
            "\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\","+
            "\".flv\",\".swf\",\".mkv\",\".avi\",\".rm\",\".rmvb\",\".mpeg\",\".mpg\","+
            "\".ogg\",\".ogv\",\".mov\",\".wmv\",\".mp4\",\".webm\",\".mp3\",\".wav\",\".mid\","+
            "\".rar\",\".zip\",\".tar\",\".gz\",\".7z\",\".bz2\",\".cab\",\".iso\","+
            "\".doc\",\".docx\",\".xls\",\".xlsx\",\".ppt\",\".pptx\",\".pdf\",\".txt\",\".md\",\".xml\""+
            "],/*上传文件格式显示*/"+
            ""+
            "/*列出指定目录下的图片*/"+
            "\"imageManagerActionName\":\"listimage\",/*执行图片管理的action名称*/"+
            "\"imageManagerListPath\":\"/ueditor/jsp/upload/image/\",/*指定要列出图片的目录*/"+
            "\"imageManagerListSize\":20,/*每次列出文件数量*/"+
            "\"imageManagerUrlPrefix\":\"\",/*图片访问路径前缀*/"+
            "\"imageManagerInsertAlign\":\"none\",/*插入的图片浮动方式*/"+
            "\"imageManagerAllowFiles\":[\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\"],/*列出的文件类型*/"+
            ""+
            "/*列出指定目录下的文件*/"+
            "\"fileManagerActionName\":\"listfile\",/*执行文件管理的action名称*/"+
            "\"fileManagerListPath\":\"/ueditor/jsp/upload/file/\",/*指定要列出文件的目录*/"+
            "\"fileManagerUrlPrefix\":\"\",/*文件访问路径前缀*/"+
            "\"fileManagerListSize\":20,/*每次列出文件数量*/"+
            "\"fileManagerAllowFiles\":["+
            "\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\","+
            "\".flv\",\".swf\",\".mkv\",\".avi\",\".rm\",\".rmvb\",\".mpeg\",\".mpg\","+
            "\".ogg\",\".ogv\",\".mov\",\".wmv\",\".mp4\",\".webm\",\".mp3\",\".wav\",\".mid\","+
            "\".rar\",\".zip\",\".tar\",\".gz\",\".7z\",\".bz2\",\".cab\",\".iso\","+
            "\".doc\",\".docx\",\".xls\",\".xlsx\",\".ppt\",\".pptx\",\".pdf\",\".txt\",\".md\",\".xml\""+
            "]/*列出的文件类型*/"+
            ""+
            "}";

}



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.filter(UeditorConfig.configContent);

		try{
			JSONObject jsonConfig = new JSONObject( configContent );
			this.jsonConfig = jsonConfig;
		} catch ( Exception e ) {
			this.jsonConfig = null;
		}

	}

最后效果图：



ok搞定

    
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码...
 
问题描述
我的编辑器在本地测试的时候没问题，但是上传到服务器上之后，上传图片、视频等文件的时候出错，显示后端配置项没有正常加载，上传插件不能正常使用！如图：

 
解决方法
可以测试一下 php 代码是否正确执行，在浏览器打开 ueditor/controller.php 对应的路径，看看是否有下面的返回值。
{
    state: "请求地址出错"
}
或者是
{"state":"\u8bf7\u6c42\u5730\u5740\u51fa\u9519"}
再访问 ueditor/php/controller.php?action=config 是否正常返回了json格式的后端配置内容，格式大致如下。
{
    "imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage",
    "imagePath": "/ueditor/php/",
    "imageFieldName": "upfile",
    "imageMaxSize": 2048,
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]
    "其他配置项...": "其他配置值..."
}
官方文档指出，如果以上这两个请求出错，出现400、500等错误，编辑器上传相关的功能将不能正常使用。
那么接下来打开ueditor/php/controller.php文件，修改
$CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents("config.json")), true);
修改成：
$CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents($_SERVER['DOCUMENT_ROOT']."/ueditor/php/config.json")), true);
代码中$_SERVER['DOCUMENT_ROOT']."/ueditor/php/config.json"为config.json文件的绝对路径！

转载于:https://www.cnblogs.com/lxwphp/p/7799257.html