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) 因此我们直接将提交的数据入库，即可完成输入内容的存储了。