富文本編輯器wangEditor3 · 梧桐樹tp6備忘錄

UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，開源基于MIT協議，允許自由使用和修改代碼。可惜在官網下載太慢了，而且界面有些許復古，放棄了，使用了輕量級wangEditor3。 1.下載手冊中下載 [http://www.hmoore.net/wangfupeng/wangeditor3/332599](http://www.hmoore.net/wangfupeng/wangeditor3/332599) 導入到項目中 ![](https://img.kancloud.cn/83/90/8390d00614d0c60a643de2a254288115_322x410.png) 2.項目中創建 ``` `<!DOCTYPE html>` `<html>` `<head>` `<meta charset=``"UTF-8"``>` `<title>wangEditor demo</title>` `</head>` `<body>` `<div id=``"editor"``>` `<p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>` `</div>` `` `<script type=``"text/javascript"``src=``"/wangEditor.min.js"``></script>` `<script type=``"text/javascript"``>` `var``E = window.wangEditor` `var``editor =``new``E(``'#editor'``)` `// 或者 var editor = new E( document.getElementById('editor') )` `editor.create()` `</script>` `</body>` `</html>` ``` ![](https://img.kancloud.cn/30/ac/30acdc5c00b871e7a2a5bf8d17d50974_755x158.png) ![](https://img.kancloud.cn/c9/05/c905d31efe15d4b173303f49839f7a6e_872x517.png) ? ?圖片上傳選的使用 base64 編碼直接將圖片插入到內容中，免去配置本地上傳沒用Ajax，所以在表單中添加了一個隱藏文本框 ``` `<input id=``"content"``name=``"content"``type=``"hidden"``>` ``` 配置`onchange`函數之后，用戶操作（鼠標點擊、鍵盤打字等）導致的內容變化之后，會自動觸發`onchange`函數執行。 submit提交時富文本內容也會提交。 ![](https://img.kancloud.cn/ad/ef/adefed23eec4ed03a13ad075dd7069a7_1415x781.png) 3.保存文本到數據庫 ![](https://img.kancloud.cn/83/b1/83b112ee7ef7196f4c41baf55c5ba1f5_866x162.png)