ueditor-百度視覺化編輯器簡單使用方法
阿新 • • 發佈：2019-01-30
1、ueditor是百度視覺化編輯工具
2、ueditor官網地址
3、開發步逐
1、在官網上下載最新版本的jsp版本
圖1
2、將下載的壓縮檔案解壓，改資料夾名稱為“ueditor”；
3、建立“ueditorTest”專案，ueditor新增到專案中；
4、專案目錄如下
圖2
5、將ueditor\jsp\lib目錄下的jar複製到專案lib目錄下（這裡是做後臺配置的jar），然後ueditor\jsp\lib可以刪除。
6、建立”ueditorTest.jsp“頁面測試
Html程式碼
-
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>提示</title>
- <!--使用ueditor需要匯入的js-->
-
<script type="text/javascript" src="common/js/ueditor/ueditor.config.js"></script>
- <script type="text/javascript" src="common/js/ueditor/ueditor.all.min.js"></script>
- <script type="text/javascript" src="common/js/ueditor/lang/zh-cn/zh-cn.js"></script>
- <style type="text/css">
- #div_1 {
-
border: thin none #069;
- padding: 1px;
- float: none;
- width: 500px;
- height: 300px;
- background-color: #9C6;
- }
- </style>
- </head>
- <body>
- <!-- 載入編輯器的容器 -->
- <script id="container" name="content" type="text/plain"> </script>
- <script type="text/javascript">
- //<!-- 例項化編輯器 -->
- var ue = UE.getEditor('container');
- function test(){
- //獲取html內容，返回: <p>hello</p>
- var html = ue.getContent();
- //獲取純文字內容，返回: hello
- var txt = ue.getContentTxt();
- alert(html);
- alert(txt);
- }
- </script>
- <input type="button" value="測試" name="ceshi" onClick="test();"/>
- </body>
- </html>
效果圖：
圖3
說明：
1、上傳圖片、附件、截圖存放路徑在“ueditor/jsp/config.json”配置，如果沒有配置會根據預設配置在工程下自動建立目錄；
2、"ueditor\jsp\controller.jsp"，為ueditor配置項入口；
3、ueditor\jsp\lib存放後臺配置的jar，使用是須將該目錄下的jar負責到專案中；
5、ueditor使用小心得
1、例項化時設定一些初始話值
Js程式碼
- // 例項化編輯器
- var ue = UE.getEditor('content',{
- initialFrameWidth :590,//設定編輯器寬度
- initialFrameHeight:400,//設定編輯器高度
- scaleEnabled:false
- });
2、直接賦值
Js程式碼
- <!--必須要在js裡初始化編輯器-->
- <td align="left" colspan="3">
- <script id="content" name="content" type="text/plain">
- ${news.content}
- </script>
- </td>
3、關閉編輯其自動增長，在ueditor.config.js配置檔案中將autoHeightEnabled: true 修改為false即可。
圖6