> # 第三例 UEditor文本編輯器
- [UEditor官網](http://ueditor.baidu.com/website/)
- UEditor是由百度WEB前端研發部開發的所見即所得的開源富文本編輯器,具有輕量、可定制、用戶體驗優秀等特點。開源基于BSD協議,所有源代碼在協議允許范圍內可自由修改和使用
- [公眾號(偉洪winnie)回復關鍵字【ky0003】獲取示例項目代碼](技術擴展閱讀.md)
> ### 簡單應用
```html
<html>
<head>
<!-- 配置文件 -->
<script type="text/javascript" src="<?php echo STATIC_PATH . "/ueditor/" ?>ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="<?php echo STATIC_PATH . "/ueditor/" ?>ueditor.all.js"></script>
<script src="<?php echo STATIC_PATH . "/js/jquery-1.8.0.js"; ?>"></script>
</head>
<body>
<div class="editor-wrapper">
<script id="container" name="content" type="text/plain"></script>
</div>
<input class="btn1" type="button" value="獲取內容">
<input class="btn2" type="button" value="設置內容">
</body>
<!-- 實例化編輯器 -->
<script type="text/javascript">
var ue = UE.getEditor('container', {
//自定義工具欄圖標:http://fex.baidu.com/ueditor/#start-toolbar
toolbars: [
[
'bold', 'italic', 'underline', 'fontsize', 'forecolor', 'horizontal', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
'simpleupload', 'attachment', '|', 'link', 'unlink', '|',
'inserttable', 'deletetable', 'insertrow', 'insertcol', 'mergeright',
'mergedown', 'deleterow', 'deletecol', 'splittorows', 'splittocols', 'mergecells',
'fullscreen'
]
],
//初始化編輯器的內容
initialContent: '歡迎使用ueditor!',
//初始化編輯器寬度,默認1000
initialFrameWidth: 858,
//初始化編輯器高度,默認320
initialFrameHeight: 500,
//阻止div標簽自動轉換為p標簽
allowDivTransToP: false,
//是否自動長高,默認true
autoHeightEnabled: false,
//是否開啟字數統計
//wordCount:true
//允許的最大字符數
//maximumWords:10000
//字數統計提示,{#count}代表當前字數,{#leave}代表還可以輸入多少字符數,留空支持多語言自動切換,否則按此配置顯示
//wordCountMsg:'' //當前已輸入 {#count} 個字符,您還可以輸入{#leave} 個字符
//超出字數限制提示 留空支持多語言自動切換,否則按此配置顯示
//wordOverFlowMsg: '' //<span style="color:red;">你輸入的字符個數已經超出最大允許值,服務器可能會拒絕保存!</span>
});
$(".btn1").click(function () {
<!-- 判斷編輯器是否有內容: ue.hasContents -->
if (ue.hasContents) {
<!-- 獲取編輯器內容: ue.getContent() -->
alert(ue.getContent());
}
});
$(".btn2").click(function () {
<!-- 設置編輯器內容: ue.setContent('設置內容') -->
ue.setContent('設置內容!!!!');
});
</script>
</html>
```
> ### 相關閱讀
- [定制工具欄圖標](http://fex.baidu.com/ueditor/#start-toolbar)
- [上傳路徑配置](http://fex.baidu.com/ueditor/#server-path)
- 目錄
- 第一例 留言板
- 第二例 WebUpload文件上傳
- 第三例 UEditor文本編輯器
- 第四例 原生分頁
- 第五例 ThinkPHP自定義分頁模板
- 第六例 加密解密
- 第七例 Excel表格導入
- 第八例 Excel表格導出
- 第九例 百度地圖
- 第十例 谷歌地圖
- 十一例 文件上傳AjaxFileUpload.js
- 十二例 文件上傳Uploadify
- 十三例 Smarty模板
- 十四例 ThinkPHP5模板
- 十五例 算法求解應用
- 十六例 二分查找
- 十七例 交換排序 - 冒泡排序
- 十八例 插入排序 - 直接插入排序
- 十九例 插入排序 - 希爾排序
- 二十例 交換排序 - 快速排序
- 二一例 支付功能
- 二二例 跟蹤調試代碼 XDebug
- 二三例 接口調試工具 SocketLog
- 二四例 遞歸 尾遞歸 迭代 回調
- 二五例 數據庫操作(MySQL擴展)
- 二六例 數據庫操作(MySQLI擴展)
- 二七例 數據庫操作(PDO擴展)
- 二八例 驗證碼
- 二九例 日歷
- 三十例 圖片轉ASCII碼圖
- 三一例 PHPMailer郵件發送
- 三二例 JpGraph圖表
- 三三例 GRPC PHP客戶端
- 三四例 ThinkPHP5模板
- 三五例 PHP開發環境(Windows方式一)
- 三六例 PHP開發環境(Windows方式二)
- 三七例 PHP開發環境(Linux方式一)
- 三八例 PHP開發環境(Linux方式二)
- 編譯安裝Nginx
- 編譯安裝PHP
- 編譯安裝MySQL
- 三九例 PHP開發環境(Linux方式三)
- 四十例 Curl模擬表單提交
- 四一例 ThinkPHP5.1新特性: 容器
- 四二例 加載規范例子
- 四三例 容器使用
- 43.1 項目托管
- 43.2 容器ZContainer
- 43.3 服務示例(Tools_Excel)
- 43.4 其它項目使用服務
- 四四例 打印工具
- 四五例 配置云服務器解析域名
- 四六例 Yii2的Gii(代碼生成器)
- 技術擴展閱讀