UEditor的安裝與基本使用


  • 官網地址:http://ueditor.baidu.com/website/
  • 簡介UEditor 是一套開源的在線HTML編輯器,主要用於讓用戶在網站上獲得所見即所得編輯效果,開發人員可以用 UEditor 把傳統的多行文本輸入框(textarea)替換為可視化的富文本編輯器
  • 下載地址:
    http://ueditor.baidu.com/website/download.html下載對應的版本,這里以jsp版本的UTF-8為例
  • 具體使用:新建一個web項目,jsp頁面引入:jquery,js、ueditor.config.js、ueditor.all.min.js,將下載的jar包添加到web項目中
  • jsp源代碼
 1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6 <script type="text/javascript" charset="UTF-8" src="./res/js/lib/jquery-1.10.2.min.js"></script>
 7 <script type="text/javascript" charset="UTF-8" src="./res/ueditor/ueditor.config.js"></script>
 8 <script type="text/javascript" charset="UTF-8" src="./res/ueditor/ueditor.all.min.js"> </script>
 9 <script type="text/javascript" charset="UTF-8" src="./res/ueditor/lang/zh-cn/zh-cn.js"></script>
10 <script type="text/javascript" charset="UTF-8" src="./res/js/js-web-ueditor.js"></script>
11 <title>ueditor基本使用</title>
12 </head>
13 <body>
14 <center>
15     <h3>UEditor百度富文本編輯器的使用</h3>
16     <!-- 加載編輯器的容器 -->
17     <script id="js-web-container" name="content" type="text/plain" style="width:60%;height:200px;">
18             初始化富文本編輯器的內容
19     </script>
20 </center>
21 </body>
22 </html>
  • js源代碼:
1 $(function() {
2     //初始化加載富文本編輯器
3     var ue = UE.getEditor('js-web-container');
4 });


免責聲明!

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



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