Ueditor使用方法，手把手教你
阿新 • • 發佈：2019-01-02
ueditor的使用方法：
第一步：引入
第二步：寫表單
傳到php裡面的時候獲取用name所帶的值獲取：本例htmlspecialchars($_POST['content'])獲取。
第三步：例項化富文字，可以設定想要的工具，配置項裡用豎線 '|' 代表分割線，如果分兩行，則用[111,1,11],[222,2,222]，這樣寫。
第四步：設定上傳圖片等等資源儲存的路徑，ueditor:上傳檔案儲存路徑設定：
D:\wamp64\www\TP\Public\utf8-php\php\config.json
"imagePathFormat": "/TP/Public/Upload/Image/{time}{rand:6}_{filename}", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */
以下是完整例項：
第一步：引入
<!-- 配置檔案 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 編輯器原始碼檔案 -->
<script type="text/javascript" src="ueditor.all.js"></script>第二步：寫表單
傳到php裡面的時候獲取用name所帶的值獲取：本例htmlspecialchars($_POST['content'])獲取。
<form action="server.php" method="post"> <!-- 載入編輯器的容器 --> <script id="container" name="content" type="text/plain"> 這裡寫你的初始化內容 </script> <input type="submit" value="提交"> </form>
第三步：例項化富文字，可以設定想要的工具，配置項裡用豎線 '|' 代表分割線，如果分兩行，則用[111,1,11],[222,2,222]，這樣寫。
<!-- 例項化編輯器 --> <script type="text/javascript"> var ue = UE.getEditor('container', { toolbars: [ ['fullscreen', 'source', 'undo', 'redo', 'bold'] ], autoHeightEnabled: true, autoFloatEnabled: true }); </script>
第四步：設定上傳圖片等等資源儲存的路徑，ueditor:上傳檔案儲存路徑設定：
D:\wamp64\www\TP\Public\utf8-php\php\config.json
"imagePathFormat": "/TP/Public/Upload/Image/{time}{rand:6}_{filename}", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */
以下是完整例項：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor demo</title> <!-- 配置檔案 --> <script type="text/javascript" src="ueditor.config.js"></script> <!-- 編輯器原始碼檔案 --> <script type="text/javascript" src="ueditor.all.js"></script> </head> <body> <form action="server.php" method="post"> <!-- 載入編輯器的容器 --> <script id="container" name="content" type="text/plain"> 這裡寫你的初始化內容 </script> <input type="submit" value="提交"> </form> <!-- 例項化編輯器 --> <script type="text/javascript"> var ue = UE.getEditor('container', { toolbars: [ ['fullscreen', 'source', 'undo', 'redo', 'bold'] ], autoHeightEnabled: true, autoFloatEnabled: true }); </script> </body> </html>