富文本编辑器wangEditor3 · 梧桐树tp6备忘录

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。可惜在官网下载太慢了，而且界面有些许复古，放弃了，使用了轻量级wangEditor3。 1.下载手册中下载 [https://www.kancloud.cn/wangfupeng/wangeditor3/332599](https://www.kancloud.cn/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)