UEditor 是百度开发的一款 富文本 编辑器，功能强大，且使用方便。我们可以把它应用在一些需要 富文本 编辑的地方，比如 编辑商品介绍、编写文章 等地方。
## 下载 UEditor
依旧是进入 UEditor 官网，进入下载页面。[UEditor 下载](http://ueditor.baidu.com/website/download.html)
我们选择 最新的 php 版本
下载完成，解压 并重命名为 ueditor 到 public\\static 下面
## 使用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)
我们可见，工具栏上的功能很多。而且我们多数情况下，并用不到这么做的功能，那我们该怎么去除那些不需要的工具栏呢？
我们可以在实例化的时候，出入我们想要的 菜单项，就像这样：
~~~
var ue = UE.getEditor('container', {
toolbars: [
['fullscreen', 'source', 'undo', 'redo', 'bold']
]
});
~~~
toolbars 的具体值，你可以参考手册。
我们在 ueditor 中写入一些文字，添加一张图片，提交看看：
出现如下的结果：
~~~
string(124) "<p>测试文字</p><p><img src="/upload/image/20170320/1490002784108814.png" title="1490002784108814.png" alt="11.png"/></p>"
~~~
同时，图片也上传到了指定目录：
因此我们直接将提交的数据入库，即可完成输入内容的存储了。
