UEditor的使用 · Thinkphp5工具箱

UEditor 是百度開發的一款富文本編輯器，功能強大，且使用方便。我們可以把它應用在一些需要富文本編輯的地方，比如編輯商品介紹、編寫文章等地方。 ## 下載 UEditor 依舊是進入 UEditor 官網，進入下載頁面。[UEditor 下載](http://ueditor.baidu.com/website/download.html) 我們選擇最新的 php 版本 ![](https://box.kancloud.cn/fc69cd97a2c1f683aa39f73c74d8e49f_932x702.jpg) 下載完成，解壓并重命名為 ueditor 到 public\static 下面 ![](https://box.kancloud.cn/d6dfbf38ce1ff2d8cc405461eab8e935_355x407.jpg) ## 使用UEditor 直接看 html 頁面中該如何去使用吧，我將在 tools 這個模塊下講解這個插件，我在 view\tools 文件夾下，新建 ueditor.html ~~~ <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor demo</title> </head> <body> <form action="{:url('tools/ueditor')}" method="post">  <script id="container" name="content" type="text/plain"> </script> <input type="submit" value="提交"> </form>  <script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>  <script type="text/javascript" src="/static/ueditor/ueditor.all.js"></script>  <script type="text/javascript"> var editor = UE.getEditor('container'); </script> </body> </html> ~~~ 我構建了一個表單，接下來演示，提交在 ueditor 中添加的數據。 ueditor.config.js 這文件，預設了很多的配置項。 >[warning] ueditor 默認的大大小是 1000 * 320，多數情況我們需要修改這大小。打開 ueditor.config.js 找到： ~~~ ,initialFrameWidth:800 //初始化編輯器寬度,默認1000 ,initialFrameHeight:320 //初始化編輯器高度,默認320 ~~~ 設置成自己喜歡的大小即可。 >[info] 里面還有大量的配置，自己需要的話，可以到官網查看手冊，進行配置。另外一個比較常用的功能，需要我們配置的就是，ueditor 中上傳的文件，應該放到哪里去。我想你做的系統肯定規劃好了所有文件的上傳路基。當然 ueditor 中上傳的文件應該也到那邊去，不應該特例獨行，不利于管理。此時，你就應該打開 ueditor\php 文件夾，有一個 config.json，我們以上傳圖片的配置為例： ~~~ /* 上傳圖片配置項 */ "imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */ "imageFieldName": "upfile", /* 提交的圖片表單名稱 */ "imageMaxSize": 2048000, /* 上傳大小限制，單位B */ "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */ "imageCompressEnable": true, /* 是否壓縮圖片,默認是true */ "imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */ "imageInsertAlign": "none", /* 插入的圖片浮動方式 */ "imageUrlPrefix": "", /* 圖片訪問路徑前綴 */ "imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */ /* {filename} 會替換成原文件名,配置這項需要注意中文亂碼問題 */ /* {rand:6} 會替換成隨機數,后面的數字是隨機數的位數 */ /* {time} 會替換成時間戳 */ /* {yyyy} 會替換成四位年份 */ /* {yy} 會替換成兩位年份 */ /* {mm} 會替換成兩位月份 */ /* {dd} 會替換成兩位日期 */ /* {hh} 會替換成兩位小時 */ /* {ii} 會替換成兩位分鐘 */ /* {ss} 會替換成兩位秒 */ /* 非法字符 \ : * ? " < > | */ /* 具請體看線上文檔: fex.baidu.com/ueditor/#use-format_upload_filename */ ~~~ 注釋已經很詳細了，相信不需要我來解釋，你就可以看得很明白了。此處我將 ueditor 的圖片上傳路徑改為 ~~~ /upload/image/{yyyy}{mm}{dd}/{time}{rand:6} ~~~ 怎么看一下它的廬山真面呢？我們在 Tools.php 中新建 ueditor ~~~ // ueditor 編輯器 public function ueditor() { if(request()->isPost()){ $content = input('post.content'); dump($content); die; } return $this->fetch(); } ~~~ 上面的一段，主要是為了演示接下來，如何獲取 ueditor 中填寫的內容。輸入 http://www.phper.com/index/tools/ueditor ![](https://box.kancloud.cn/7cdcd8c70ef301ff05aef43ad7a273de_899x557.jpg) 我們可見，工具欄上的功能很多。而且我們多數情況下，并用不到這么做的功能，那我們該怎么去除那些不需要的工具欄呢？我們可以在實例化的時候，出入我們想要的菜單項，就像這樣： ~~~ var ue = UE.getEditor('container', { toolbars: [ ['fullscreen', 'source', 'undo', 'redo', 'bold'] ] }); ~~~ toolbars 的具體值，你可以參考手冊。我們在 ueditor 中寫入一些文字，添加一張圖片，提交看看： ![](https://box.kancloud.cn/b4023ed99f061a6691e4b52e5d51947b_885x553.jpg) 出現如下的結果： ~~~ string(124) "<p>測試文字</p><p><img src="/upload/image/20170320/1490002784108814.png" title="1490002784108814.png" alt="11.png"/></p>" ~~~ 同時，圖片也上傳到了指定目錄： ![](https://box.kancloud.cn/937216fb1eec96a1ad6bcc2ed7751d91_361x131.jpg) 因此我們直接將提交的數據入庫，即可完成輸入內容的存儲了。