百度富文本編輯器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()

百度富文本編輯器UEditor 的引入及簡單應用筆記

工作中用到的腳本合集

微服務實踐Aspire項目發佈到遠程k8s集羣

通過f-string編寫簡潔高效的Python格式化輸出代碼

[轉帖]20個常用的Linux工具命令

[轉帖]PostgreSQL從小白到高手教程 - 第46講：poc-tpch測試

24-5-18 X

js筆記通過js 填充到jsp 的html內容，其中的點擊事件不生效解決方法

js筆記 web頁面打印功能

Tomcat 筆記（一） tomcat初步安裝應用

echarts關係圖筆記（一）

Echarts 自定義提示框內容

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結