【php】ThinkPHP搭建百度Ueditor富文字編輯器
阿新 • • 發佈：2019-01-05
簡介
UEditor是由百度web前端研發部開發所見即所得富文字web編輯器，具有輕量，可定製，注重使用者體驗等特點，開源基於MIT協議，允許自由使用和修改程式碼。
下載UEditor
將下載好的檔案解壓到thinkphp專案中，本文是解壓到PUBLIC目錄下並改資料夾名稱為ueditor
第一步 引入javascript
在html中如入下面的js語句引入相關檔案<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.js"></script>
第二步 新增textare文字域並設定id值
<textarea type="text" name="content" id="EditorId" placeholder="請輸入內容"></textarea>第三步 初始化UEditor編輯器
在html程式碼中新增下面的程式碼初始化UEditor編譯器<script type="text/javascript" charset="utf-8">//初始化編輯器 window.UEDITOR_HOME_URL = "__PUBLIC__/ueditor/";//配置路徑設定為UEditor所放的位置 window.onload=function(){ window.UEDITOR_CONFIG.initialFrameHeight=600;//編輯器的高度 window.UEDITOR_CONFIG.initialFrameWidth=1200;//編輯器的寬度 var editor = new UE.ui.Editor({ imageUrl : '', fileUrl : '', imagePath : '', filePath : '', imageManagerUrl:'', //圖片線上管理的處理地址 imageManagerPath:'__ROOT__/' }); editor.render("EditorId");//此處的EditorId與<textarea name="content" id="EditorId">的id值對應 </textarea> } </script>
第四步 設定圖片上傳路徑
UEditor編輯器的預設圖片上傳路徑是根目錄下/ueditor/php/upload/image/目錄，沒有這個目錄會自動建立，如果要自定義圖片上傳路徑，可以在ueditor/php/config.json檔案中12行處修改。最後貼上完整的html程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.js"></script> </head> <body> <form action="__URL__/receiver" method="post" accept-charset="utf-8"> <textarea type="text" name="content" id="EditorId" placeholder="請輸入內容"></textarea> <input type="submit" value="提交"> </form> <script type="text/javascript" charset="utf-8">//初始化編輯器 window.UEDITOR_HOME_URL = "__PUBLIC__/ueditor/";//配置路徑設定為UEditor所放的位置 window.onload=function(){ window.UEDITOR_CONFIG.initialFrameHeight=600;//編輯器的高度 window.UEDITOR_CONFIG.initialFrameWidth=1200;//編輯器的寬度 var editor = new UE.ui.Editor({ imageUrl : '', fileUrl : '', imagePath : '', filePath : '', imageManagerUrl:'', //圖片線上管理的處理地址 imageManagerPath:'__ROOT__/' }); editor.render("EditorId");//此處的EditorId與<textarea name="content" id="EditorId">的id值對應 </textarea> } </script> </body> </html>
效果圖
