上次记录了插入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>
<!-- UEditor的位置 -->
<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>
大致就是这样了，正常使用应该是没问题了。
以上。
网友评论