1. 程式人生 > >頁面插入百度UEditor編輯器

頁面插入百度UEditor編輯器

height blog 含義 復制 保留 了解 com mat ext

工作中用到了百度的富文本。以下總結記錄一下,UEditor嵌入網頁的方法。

第一步

到百度UEditor官網下載所需版本:http://ueditor.baidu.com/website

本次下載的是 utf-8的jsp版:ueditor1_4_3_2-utf8-jsp.zip。

第二步

解壓得到如圖文件結構;之後打開jsp/lib/ 將lib下的jar包 導入項目,註意jar包版本問題,如果項目中有相同的包,刪掉低版本保留高版本的。

技術分享

第三步 瀏覽器打開index.html會發現這是UEditor的一個參考demo,已經實現了網頁插入編輯器的等功能,復制整個文件夾到項目下;查看index.html、config.json、ueditor.config.js這幾個關鍵文件。

index.html 頁面demo;confg.jso上傳配置;ueditor.config.js對ueditor的完整配置。

第四步 將demo中的<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script> 插入到頁面相應位置。同時記得引用對應的js和語言設置,最後實例化編輯器

<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>

<script type="text/javascript" charset="uft-8" src="lang/zh-cn/zh-cn.js"></script>

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

第五 打開config.json該文件主要用於上傳的各項配置; 將imageUrlPrefix:設置為項目路徑(/項目名稱);這將解決上傳圖片失敗問題。設置好之後,每次上傳的圖片都會保存在服務器imagePathFormat配置的路徑中。

第六:打開ueditor.config.js,對工具欄toolbars上的所有的功能按鈕進行配置,不需要的功能刪除相應名稱即可。可以在new編輯器的實例時選擇自己需要的從新定義。

// 服務器統一請求接口路徑,處理請求,其中的controller.jsp為UEditor默認的處理controller;如果要自定義處理圖片上傳等,需更改配置。
, serverUrl: URL + "jsp/controller.jsp"

最後,其實UEditor的文件中都有相應的配置註釋說明,很方便快速了解代碼配置含義。也可以查看官方的API。工作中只使用了上傳圖片和基本的文本編輯功能,對於自主定義controller處理圖片上傳,和其他更豐富的功能還有待了解。

頁面插入百度UEditor編輯器