JSP頁面中嵌入UEditor編輯器方法

Roninwz發表於2017-09-17
JS

JSP頁面使用UEditor編輯器

對於一些剛入門的程式設計師來說，在一些實際的開發中可能會用到編輯器，那麼如何在JSP頁面中嵌入並使用編輯器（本文以百度的UEditor編輯器為例），以下是具體的操作流程：

第一步

首先要到UEditor官網下載不同版本的編輯器，使用者可以根據自身的需求進行下載，本文操作所需要的是JSP版本，UEditor下載如圖所示：

UEditor編輯器下載地址：http://ueditor.baidu.com/website/download.html


下載完成後進行解壓縮到任意資料夾，包中的內容如下圖：

另附上幾個編輯器的下載地址：

1.KindEditor：http://kindeditor.net/down.php

2.xhEditor：http://xheditor.com/download.html

3.TQEditor：http://www.e512.net/tqeditor/download.htm

第二步

在Eclipse中新建Dynamic Wen Project，並在WebContent下新建資料夾，命名為UEditor，把剛解壓的檔案複製到該資料夾，結構如圖所示：


需要注意的是，要把編輯器所需的jar也匯入到WEB-INF下的lib中：

第三步

經過以上配置，基本上已經把相應的環境配好了，接下來就是要寫一個jsp頁面進行展示，為了演示需要，在這裡把index.jsp作為演示頁面。

開啟index.jsp頁面，匯入對應的js和css樣式，程式碼如下：

[html] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  7. <title>百度UEditor編輯器</title>  
  8. <script type="text/javascript" src="UEditor/ueditor.config.js"></script>  
  9. <script type="text/javascript" src="UEditor/ueditor.all.js"></script>  
  10. <link rel="stylesheet" href="UEditor/themes/default/css/ueditor.css">  
  11. <!--建議手動加在語言，避免在ie下有時因為載入語言失敗導致編輯器載入失敗-->  
  12. <!--這裡載入的語言檔案會覆蓋你在配置專案裡新增的語言型別，比如你在配置專案裡配置的是英文，這裡載入的中文，那最後就是中文-->  
  13. <script type="text/javascript" charset="utf-8"  
  14.     src="UEditor/lang/zh-cn/zh-cn.js"></script>  
  15.   
  16. <style type="text/css">  
  17. div {  
  18.     width: 100%;  
  19. }  
  20. </style>  
  21.   
  22. </head>  
  23. <body>  
  24.     <textarea id="container" name="container"  
  25.         style="width: 800px; height: 400px; margin: 0 auto;"></textarea>  
  26.     <script type="text/javascript">  
  27.         UE.getEditor("container");  
  28.     </script>  
  29. </body>  
  30. </html>  
以上程式碼寫好以後，部署專案，執行tomcat，開啟瀏覽器在位址列中輸入：http://localhost:8080/UEditor/，可以看到編輯器的效果：


注意：在壓縮的包中，有index.html頁面，裡面有具體的配置資訊，本文不做詳細介紹。


轉載來自：http://blog.csdn.net/j_tinker/article/details/50845132

相關文章