🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
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 这文件,预设了很多的配置项。 > ueditor 默认的大大小是 1000 \* 320,多数情况我们需要修改这大小。 打开 ueditor.config.js 找到: ~~~ ,initialFrameWidth:800 //初始化编辑器宽度,默认1000 ,initialFrameHeight:320 //初始化编辑器高度,默认320 ~~~ 设置成自己喜欢的大小即可。 > 里面还有大量的配置,自己需要的话,可以到官网查看手册,进行配置。 另外一个比较常用的功能,需要我们配置的就是,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](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) 因此我们直接将提交的数据入库,即可完成输入内容的存储了。