第五節 UEditor 文本編輯器 · 個人筆記

>[success] # UEditor文本編輯器 * UEditor是由百度WEB前端研發部開發的所見即所得的開源富文本編輯器，具有輕量、可定制、用戶體驗優秀等特點。開源基于BSD協議，所有源代碼在協議允許范圍內可自由修改和使用 - [官網介紹](http://ueditor.baidu.com/website/) ![](https://box.kancloud.cn/5f9e7308c9ad20e6a986e56312867990_869x566.png) >[info] # 簡單應用 ```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 () {  if (ue.hasContents) {  alert(ue.getContent()); } }); $(".btn2").click(function () {  ue.setContent('設置內容!!!!'); }); </script> </html> ``` >[info] # 相關閱讀 * [定制工具欄圖標](http://fex.baidu.com/ueditor/#start-toolbar) * [上傳路徑配置](http://fex.baidu.com/ueditor/#server-path) >[info] # 源碼下載 - Tip：公眾號回復【022】獲取源代碼 ![](https://img.kancloud.cn/de/d6/ded6e495eb8a39d2c7a8b0547b329d19_430x430.jpg)