往在web開發的時候，尤其是在網站開發后台管理系統的時候經常會使用到富文本編輯器，這里我們來使用百度提供的富文本編輯器UEditor，以提高我們的開發效率
UEditor官網下載地址：https://ueditor.baidu.com/website/download.html
這里我下載的是jsp版本中的UTF-8版，然后將壓縮包解壓之后是這個樣子
解壓內容中的index.html是官方給我們提供的一個富文本使用例程，打開頁面可以體驗到各種富文本操作。
接下來將UEditor應用到我們自己的項目中
1、新建一個動態Web工程
2、將解壓到的UEditor文件拷貝到新建工程的WebContent目錄下
這時會報錯，不用擔心。原因是我們還沒有將UEditor需要用到的jar包加入到工程環境當中。
接下來打開目錄jsp->lib，將lib下面的所有jar包全部拷貝到WEB-INF/lib文件中，eclipse會自動將新導入的包加入到工程環境當中。
3、新建一個ueditor.jsp頁面，開始導入UEditor富文本編輯器
注意：在導入UEditor時必須要的3個文件，
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script> <!--ueditor的配置文件--> <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script> <!--ueditor核心文件--> <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script> <!--ueditor語言文件-->
導入這3個文件之后在需要調用UEditor的位置加入
<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
最后通過初始化UEditor,讓它顯示出來
<script type="text/javascript"> var ue = UE.getEditor('editor'); </script>
頁面全部代碼如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script> <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script> <title>ueditor</title> </head> <body> <div style="width: 300px; height: 200px;"> <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script> </div> <script type="text/javascript"> var ue = UE.getEditor('editor'); </script> </body> </html>
效果如下：
注意：1、當文本框中的內容隨<form>表單一起提交的時候，內容存儲在editorValue變量中，在后台提取內容的時候可以讀取此變量
2、在需要上傳圖片的時候，需要配置圖片路徑，否則上傳的圖片在富文本編輯器中是無法顯示出來的。
在ueditor--->jsp----->lib---->config.json文件中更改圖片路徑
3、在將富文本編輯器的路徑加入到ueditor.config.js當中
到此配置完成！！！