上次记录了插入wangEditor，这次来记录记录插入百度的UEditor

怨念啊，百度的Ueditor功能多，兼容性也好，用的人也多，虽然很久没更新过了，不过这不重要，最重要的一点就是：颜值不行！！目前接触了三个富文本编辑器，wangEditor，UEditor，layui的LayEdit，哪个都能在颜值上完爆它。

进入正题，刚开始接触的时候，以为这个UEditor挺麻烦的，没想到如果只是基本的使用的话，挺简单的。

首先

在官网下载压缩包，官网地址：https://ueditor.baidu.com/website/download.html

我下载的是开发版的1.4.3.3 PHP的UTF-8版本。如下图：

其次

将下载的压缩包解压到tp框架的public下的static下，如下图：

至于为什么要解压至这个文件夹呢？因为html引用的时候用__STATIC__就可以很方便的指引到这个目录下了啊┐(´-｀)┌

讲道理，一般来讲，你放在哪里都是可以的。

然后少少的几行代码就可以了

为了页面好看，代码放至文章末尾。

非常的方便，如下图：

效果图：

至于精简菜单栏？这个不在讨论范围，因为这个编辑器的菜单栏功能实在太多了，自己去文档看着减少吧，

地址：http://fex.baidu.com/ueditor/#start-toolbar

内容获取：

另，如果是form表单上传，或者是ajax自动获取参数上传的话，后台接收的参数是那个name，也就是input('content')，但假如是ajax手写数据上传的话，编辑器的内容获取是 ue.getContent();

如果是给编辑器赋值的话，可以直接在那个占位标签（也就是id为ueditor的script）的中间直接添加内容，也可以 ue.setContent('hello');设置编辑器内容

截至为此，已可以完成最基本的使用问题，可以选择直接往最文章末尾获取代码使用。

解释一下几个参数的意思

完整的请看文档：http://fex.baidu.com/ueditor/#start-config

zIndex ：UEditor的层次优先级，如果发现有被遮挡的情况，修改这个值就好，默认900，数字越大，优先级越高

maximumWords ：最大输入字节限制，默认10000，超出后会红字在右下角提示"字数超出最大允许值，服务器可能拒绝保存！"，也可以通过 wordOverFlowMsg 这个属性自定义内容，不过要注意的是原版内容皆支持中英文转换，自定义的内容就没这个福利了，除非你去修改源码和语言包

scaleEnabled ：是否可以拉伸长高，但貌似输入区域的宽度不会变，这可能是个bug，慎用！

initialFrameWidth ：编辑器的宽度

initialFrameHeight ：编辑器输入区域的高度，并不包括工具栏

autoHeightEnabled ：输入区域是否自动长高

常用的大概就上面的几个了，下面讲讲上传文件：

一般来讲，解压以后直接使用是没有问题的，

默认是上传的文件保存在当前域名下的/ueditor/php/upload目录下面，并且根据文件类型自动新建文件夹，且继续生成{yyyy}{mm}{dd}格式的文件夹进行保存

文件名格式则是{time}{rand:6}的格式。

例如编辑器在下面这个地址上传文件的话，文件则是保存在localhost也就是www下面的\ueditor\php\upload\image\20180403，如果是服务器的话，则在域名下的文件夹里

那么问题来了，假如我们想将上传的文件保存在其他的文件夹怎么办？往下看：

目光转至我们最初解压出来的文件夹ueditor，在下面的php文件夹里有一个config.json，将它打开：

~~咳，歌词忽略……~~

这里就是上传文件的配置了，我们重点关注两个内容，一个是图片访问路径前缀，一个是上传保存路径，就是上图红框框里的代码，我已经将它改为了保存至我们框架下的public/ueditor/upload/image/{yyyy}{mm}{dd}里了。访问前缀可不改。

那么如果你需要修改的话，可以像上面一样修改，注意事项有俩，一：目录基于域名或localhost目录下，而不是框架根目录。二：每种上传方式都得修改一次┐(´-｀)┌

附上代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>百度富文本编辑器</title>

</head>

<body>



<script id="ueditor" name="content" type="text/plain"></script>





<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">

// zIndex UEditor的层次优先级，如果发现有被遮挡的情况，修改这个值就好

// maximumWords 最大输入字节限制，超出后会红字在右下角提示"字数超出最大允许值，服务器可能拒绝保存！"

// scaleEnabled 是否可以拉伸长高，但貌似输入区域的宽度不会变，这可能是个bug

// initialFrameWidth 编辑器的宽度

// initialFrameHeight 编辑器输入区域的高度，并不包括工具栏

// autoHeightEnabled 输入区域是否自动长高

var ue = UE.getEditor('ueditor', {

zIndex: 99,

maximumWords: 999,

scaleEnabled: true,

initialFrameWidth: 800,

initialFrameHeight: 300,

autoHeightEnabled: false,}

);

</script>

</body>

</html>

大致就是这样了，正常使用应该是没问题了。

以上。

tp5插入百度富文本编辑器UEditor