上次记录了插入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>
大致就是这样了,正常使用应该是没问题了。
以上。