JSP頁面中嵌入UEditor編輯器方法
阿新 • • 發佈:2019-01-10
JSP頁面使用UEditor編輯器
對於一些剛入門的程式設計師來說,在一些實際的開發中可能會用到編輯器,那麼如何在JSP頁面中嵌入並使用編輯器(本文以百度的UEditor編輯器為例),以下是具體的操作流程:
第一步
首先要到UEditor官網下載不同版本的編輯器,使用者可以根據自身的需求進行下載,本文操作所需要的是JSP版本,UEditor下載如圖所示:
下載完成後進行解壓縮到任意資料夾,包中的內容如下圖:
另附上幾個編輯器的下載地址:
第二步
在Eclipse中新建Dynamic Wen Project,並在WebContent下新建資料夾,命名為UEditor,把剛解壓的檔案複製到該資料夾,結構如圖所示:
需要注意的是,要把編輯器所需的jar也匯入到WEB-INF下的lib中:
第三步
經過以上配置,基本上已經把相應的環境配好了,接下來就是要寫一個jsp頁面進行展示,為了演示需要,在這裡把index.jsp作為演示頁面。
開啟index.jsp頁面,匯入對應的js和css樣式,程式碼如下:
以上程式碼寫好以後,部署專案,執行tomcat,開啟瀏覽器在位址列中輸入:http://localhost:8080/UEditor/,可以看到編輯器的效果:<%@ 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"> <title>百度UEditor編輯器</title> <script type="text/javascript" src="UEditor/ueditor.config.js"></script> <script type="text/javascript" src="UEditor/ueditor.all.js"></script> <link rel="stylesheet" href="UEditor/themes/default/css/ueditor.css"> <!--建議手動加在語言,避免在ie下有時因為載入語言失敗導致編輯器載入失敗--> <!--這裡載入的語言檔案會覆蓋你在配置專案裡新增的語言型別,比如你在配置專案裡配置的是英文,這裡載入的中文,那最後就是中文--> <script type="text/javascript" charset="utf-8" src="UEditor/lang/zh-cn/zh-cn.js"></script> <style type="text/css"> div { width: 100%; } </style> </head> <body> <textarea id="container" name="container" style="width: 800px; height: 400px; margin: 0 auto;"></textarea> <script type="text/javascript"> UE.getEditor("container"); </script> </body> </html>
注意:在壓縮的包中,有index.html頁面,裡面有具體的配置資訊,本文不做詳細介紹。