上次记录了插入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-configzIndex :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目录下,而不是框架根目录。二:每种上传方式都得修改一次┐(´-`)┌
附上代码:
百度富文本编辑器// zIndexUEditor的层次优先级,如果发现有被遮挡的情况,修改这个值就好
// maximumWords最大输入字节限制,超出后会红字在右下角提示"字数超出最大允许值,服务器可能拒绝保存!"
// scaleEnabled是否可以拉伸长高,但貌似输入区域的宽度不会变,这可能是个bug
// initialFrameWidth编辑器的宽度
// initialFrameHeight编辑器输入区域的高度,并不包括工具栏
// autoHeightEnabled输入区域是否自动长高
var ue = UE.getEditor('ueditor', {
zIndex: 99,
maximumWords: 999,
scaleEnabled: true,
initialFrameWidth: 800,
initialFrameHeight: 300,
autoHeightEnabled: false,}
);
大致就是这样了,正常使用应该是没问题了。
以上。