頁面插入百度UEditor編輯器


 工作中用到了百度的富文本。以下總結記錄一下,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處理圖片上傳,和其他更豐富的功能還有待了解。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM