JAVA 集成 Ueditor 百度富文本编辑器

时间：2022-11-18 20:39:44

开发环境：一个简单的SpringMVC框架中，用百度富文本编辑器 ueditor 实现图片和文件的上传

官网地址：http://ueditor.baidu.com/website/

需要使用到的2个文件如下（官网上下载）：
1，ueditor1_4_3_3-utf8-jsp.zip
2，ueditor1_4_3_3-src.zip(源码包)

SpringMVC框架搭建，我这里就不说了，注意下spring配置静态资源目录的时候，如果上传的图片是放在根目录下的话

需要在spring配置文件中加入：

<mvc:resources location="/ueditor/" mapping="/ueditor/**"></mvc:resources><!--这个是图片目标，是位于根目录，是在服务器中，而非是assets--->

也可以用另外一种方式，就是在编辑器的配置文件中更改图片保存的目录位置；

第一步：把下载下来的2个压缩文件解 放入到项目中：

解压会得到一个utf-8-jsp的文件夹，重命名为ueditor方便理解（这个名称可以随意：基本工作开发中的资源目录都是放入assets目录中，）

解压源码包得到的ueditor-1.4.3.3里面有一个jsp目录，进入C:\Users\92307\Desktop\ueditor-1.4.3.3\jsp\src 下，把com文件夹复制

到项目的java代码中：结构如下图所示

JAVA 集成 Ueditor 百度富文本编辑器

第二步：接下来就是配置ueditor到项目中了

1、后台写一个接收方法，复制下面代码即可：（可以参考assets/ueditor/jsp/controller.jsp）

/**

     * 百度富文本编辑器：图片上传

     * @param request

     * @param response

     */

    @RequestMapping("/upload")

    public void imgUploadByUeditor(HttpServletRequest request, HttpServletResponse response) throws IOException {

        request.setCharacterEncoding( "utf-8" );

        response.setHeader("Content-Type" , "text/html");

        ServletContext application=request.getServletContext();

        String rootPath = application.getRealPath( "/" );

        PrintWriter out = response.getWriter();

        out.write( new ActionEnter( request, rootPath ).exec() );

    }

接下来修改config.json文件的目录（在ueditor源码中）

打开项目中src\com\baidu\ueditor\ConfigManager.java

修改第28行 configFileName="/assets/ueditor/jsp/config.json"

private static final String configFileName = "/assets/ueditor/jsp/config.json";

一般公司都会有自己的项目名，可以在 config.json 中 添加 图片、文件……上加上 访问前缀，但如果服务器有几个，就比较麻烦，

所以推荐使用在configManager.java的initEvn方法中修改：如下所示

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().replace( "\\", "/" ) );

        try{

            JSONObject jsonConfig = new JSONObject( configContent );

            //下面是手动修改配置文件的前缀

            if(!StringUtils.isEmpty(this.contextPath)){

                jsonConfig.put("imageUrlPrefix",this.contextPath);//图片

                jsonConfig.put("scrawlUrlPrefix",this.contextPath);//涂鸦

                jsonConfig.put("snapscreenUrlPrefix",this.contextPath);//截图

                jsonConfig.put("catcherUrlPrefix",this.contextPath);//抓取远程图片配置

                jsonConfig.put("videoUrlPrefix",this.contextPath);//上传视频配置

                jsonConfig.put("fileUrlPrefix",this.contextPath);//上传文件

                jsonConfig.put("imageManagerUrlPrefix",this.contextPath);//列出指定目录下的图片

                jsonConfig.put("fileManagerUrlPrefix",this.contextPath);//列出指定目录下的文件

            }

            this.jsonConfig = jsonConfig;

        } catch ( Exception e ) {

            this.jsonConfig = null;

        }

    }

后台的配置 弄完了，接下来弄下前端的配置就ok了

第三步：打开assets/ueditor/ueditor.config.js文件

    window.UEDITOR_HOME_URL =ctx+"/assets/ueditor/";

    var URL = window.UEDITOR_HOME_URL || getUEBasePath();

    /**

     * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。

     */

    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释

        UEDITOR_HOME_URL: URL

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

        , serverUrl:  ctx+"/upload"//这个是后台请求的路径，与上面的action对应，其中的ctx 是在引入富文本编辑器的也没中定义的，等于var ctx='${pageContext.request.contextPath}'

修改 \assets\ueditor\jsp\config.json 文件

在所有的上传保存文件路径中 都加入一个前缀 /assets  如下图所示：

JAVA 集成 Ueditor 百度富文本编辑器

第三步;其实就是删除多余的文件，比如ueditor.jar可以删除，因为我们导入了源码，然后*min.js都可以删除，controller.jsp 也到删除掉，index.html可以保留
方便今后查看编辑器的构造函数

第四步;页面引入百度富文本编辑器方法:
<script>

    var ctx = '${ctx}';</script>

<!--百度编辑器--->

<script type="text/javascript" charset="utf-8" src="${ctx}/assets/ueditor/ueditor.config.js"></script>

<script type="text/javascript" charset="utf-8" src="${ctx}/assets/ueditor/ueditor.all.js"> </script>

<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->

<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->

<script type="text/javascript" charset="utf-8" src="${ctx}/assets/ueditor/lang/zh-cn/zh-cn.js"></script>

<script>

    var ue = UE.getEditor('editor');

</script>

<div>

<script id="editor" type="text/plain" style="width:100%;height:400px;"></script>

</div>

--------------------------

补充：如果自定义文件上传，则，返回给编辑器的数据结构如下：

{
"state": "SUCCESS",
"original": "80px - \u526f\u672c (2).jpg",
"size": "13252",
"title": "1465731377326075274.jpg",
"type": ".jpg",
"url": "/ueditor/jsp/upload/image/20160612/1465731377326075274.jpg"
}
---------------------

相关文章