百度富文本编辑器UEditor 的引入及简单应用笔记

由于最近项目中页面开发用到了UEditor ，所以在此写一遍简单的使用笔记，以供各位同行参考，希望有所助益。

本文将对UEditor 的引入，图片上传及回显。

1.  UEditor的引入

     1.1 下载响应的UEditor版本，下载地址：https://ueditor.baidu.com/website/download.html#ueditor 

           本人项目中下载了[1.4.3.3 Jsp 版本] UTF-8版 。

     1.2 将下载的文件解压，将解压后的文件夹 ueditor1_4_3_3-utf8-jsp 复制到 项目的js目录下。将controller.jsp和config.json 两个文件 复制到 项目的webapp目录下 和 WEB-INF目录平级。将ueditor1_4_3_3-utf8-jsp\utf8-jsp\jsp\lib 目录下的 各个jar包 通过pom.xml 文件替换导入所需依赖，原来的lib文件夹可以删除掉 如下：

<!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->
<dependency>
    <groupId>commons-codec</groupId>
    <artifactId>commons-codec</artifactId>
    <version>1.9</version>
</dependency>

<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>

<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>

<!-- https://mvnrepository.com/artifact/org.json/json -->
<dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>20180813</version>
</dependency>

<!-- https://mvnrepository.com/artifact/com.gitee.qdbp.thirdparty/ueditor -->
<dependency>
    <groupId>com.gitee.qdbp.thirdparty</groupId>
    <artifactId>ueditor</artifactId>
    <version>1.4.3.3</version>
</dependency>

 

     1.3 打开ueditor.config.js 文件，做如下三处修改：

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

修改为 var URL = window.UEDITOR_HOME_URL || "/js/ueditor1_4_3_3-utf8-jsp/"; （ueditor1_4_3_3-utf8-jsp 在项目中路径）

           1.3.2 将 serverUrl: URL + "jsp/controller.jsp" 修改为 serverUrl: URL + "/controller.jsp"

           1.3.3  选择富文本编辑框中工具栏 需要的功能，不需要的可以在下面注释掉。

toolbars: [[
    'fullscreen', 'source', '|', 'undo', 'redo', '|',
    'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
    'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
    'directionalityltr', 'directionalityrtl', 'indent', '|',
    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase',
    'link', 'unlink', 'anchor', '|',
    // '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
    'insertimage', 'emotion',
    //'simpleupload','scrawl','insertvideo', 'music',  'gmap', 'insertframe','attachment',
    'map', 'insertcode', '|',
    // 'webapp',
    'pagebreak', 'template',
    // 'background', '|',
    'horizontal', 'date', 'time', 'spechars', '|',
    // 'snapscreen', 'wordimage', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
    'print', 'preview', 'searchreplace', 'drafts', 'help'
]]

      1.4 js和jsp中配置

            1.4.1 开发的jsp页面中 引入下面内容：

<script type="text/javascript" charset="utf-8"
        src="/js/ueditor1_4_3_3-utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
        src="/js/ueditor1_4_3_3-utf8-jsp/ueditor.all.min.js"></script>
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8"
        src="/js/ueditor1_4_3_3-utf8-jsp/lang/zh-cn/zh-cn.js"></script>

jsp页面中需要放置富文本编辑框的 地方 加入如下内容。

<textarea id="wxContent" name="wxContent" style="width:100%;height: 300px;"></textarea>

 

             1.4.2 开发的js页面中 加入如下内容：

//实例化uEditor编辑器
var uEditor = UE.getEditor('wxContent');

到此如果没有操作 错误的话，页面上是可以展示富文本编辑框的。

2. 多图上传及图片回显（下面程序中加上 服务器ip及端口号 是因为此处是跨域上传和访问）

    2.1 多图上传到web服务器： 

         2.1.1  修改config.json 文件的两处地方

"imageUrlPrefix": "http://192.***.***.***:8082/pictures/", /* 图片访问路径前缀（web服务器上的图片访问url） */
"imagePathFormat": "", /* 上传保存路径,可以自定义保存路径和文件名格式 */

         2.1.2 开发的页面js中添加如下代码：

//实例化uEditor编辑器
var uEditor = UE.getEditor('wxContent');

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function (action) {
    if (action == 'uploadimage') {
        //自定义的上传接口
        return 'http://192.***.***.***:8082/my/BaseController/uploadUEditorImage';
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
}     

     2.1.3 后端上传接口
@RequestMapping(value = "/uploadUEditorImage", method = RequestMethod.POST)
@ResponseBody
public String uploadUEditorImage(@RequestParam(value = "upfile", required = false) MultipartFile file) {

    try {
        // 接收上传的文件, 取扩展名
        String fileName = file.getOriginalFilename();
        fileName = fileName.replaceAll("\\s*", "");
        String newFileName = FileUtil.doGetFileName(fileName);

        //获取文件大小（字节b byte）
        BigDecimal fileSize = new BigDecimal(file.getSize());
        BigDecimal mod = new BigDecimal(1024);
        //从大到小顺序为T、GB、MB（兆Zhao）、KB、B再小就是位了。除两个1024，保留两位小数，进行四舍五入
        fileSize = fileSize.divide(mod).divide(mod).setScale(2, BigDecimal.ROUND_HALF_UP);

        if (fileSize.compareTo(new BigDecimal(5)) > 0) {
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("status", "ERROR");
            return jsonObject.toJSONString();
        }

        byte[] byteArray = file.getBytes();
        //上传
        xxxxxService.uploadPicture(byteArray, currentUrl, newFileName);

        Map<String, Object> result = new HashMap<>(8);

        //原始文件名（用于文件名回显）
        result.put("original", fileName);
        result.put("size", fileSize);
        result.put("state", "SUCCESS");
        //展示图片的请求url（图片在服务器上的名字或者访问路:http://192.***.***.***:8082/pictures/wxTbt6EC5E8DC-1.png）
        result.put("url", newFileName);
        //展示图片的描述和悬浮提示（此处用源文件名）
        result.put("title", fileName);
        logger.info("\n【返回服务器上的图片访问路径】：｛｝", "/pictures/" + newFileName);

        String jStr = JSON.toJSONString(result);
        //返回值用于页面图片回显
        return jStr;
    } catch (Exception ex) {
        logger.info("\n【上传失败！】：｛｝", ex);
    }

    return null;
}

到此，即可完成多图上传功能！

另附 常用的UEditor 方法（网上查询所得，有个别未曾亲自验证，使用时仅供参考）如下：

1、创建编辑器

UE.getEditor('editor', {

initialFrameWidth:"100%" //初始化选项

})

精简版

UE.getEditor('editor')

2、删除编辑器

UE.getEditor('editor').destroy();

3、设置焦点

UE.getEditor('editor').focus();

4、获取编辑器内容

UE.getEditor('editor').getContent()

5、编辑器是否有内容

UE.getEditor('editor').hasContents()

6、获取编辑器内容纯文本格式

UE.getEditor('editor').getContentTxt()

7、获取带格式的纯文本

UE.getEditor('editor').getPlainTxt()

8、启用编辑器

UE.getEditor('editor').setEnabled();

9、禁止编辑

UE.getEditor('editor').setDisabled('fullscreen');

10、获取整个html内容

UE.getEditor('editor').getAllHtml()