扩展已经升级UEditor至1.4.3,新版本可以从github下载。
参考:[更新]UEditor1.4.3-for-Yii1-扩展
请务必阅读上文,尽量使用最新版本。
也有一个Yii2版本的扩展,配置与Yii1版本的配置方式差不多。
github:https://github.com/xbzbing/Yii2-UEditor
使用的第一款富文本编辑器是xhEditor,喜欢她的简洁,当时还专门写了个上传类来配合使用。后来要写一些通用CMS的时候,简洁反倒成了缺点:一些不常上网的用户觉得这个编辑器太难用。唉,仿佛ewebeditor才是他们心中的唯一的编辑器。于是使用了这个百度富文本编辑器UEditor。
第一眼看上去UEditor确实大气,不错,但是说实话后悔用她了。因为丫实在太大了,加载很慢,在网速不是很好的时候太影响使用了。我现在觉得UMeditor可能会更好一点。等这个Blog开发到下个版本的时候再看看,忍不了就换了。
因为程序使用了Yii,所以给UEditor单独封装了一个扩展,放出来玩玩。扩展的github地址是:
https://github.com/xbzbing/yii1-ueditor
一点说明
虽然在若干年前。。。已经有了很多百度编辑器的扩展,但是总觉得用着别扭,而且版本都比较低。于是自己写了个。
上传图片自动生成缩略图。这里使用了ThinkPHP的图片处理类。生成的缩略图名字是「原图片.thumbnail.扩展名」的形式。默认大小是200×200的缩略图,修改的话自己改源码。增加水印什么的都可以自己用这个类来改,我没需求暂时就不做了。
图片管理部分自动显示缩略图,当点击缩略图时,插入原图。
扩展中包含了UEditor的源码,在resources目录,使用Yii的asset机制来发布(我是如此的喜欢这个assetManager啊)。
因为UEditor在附件上传中使用了swfuploader,上传文件时无法携带cookie,所以增加了editor.options.sessionId,在上传过程中维持身份认证。因此修改了编辑器的上传页面,改完了的页面放在patch目录。
当前使用的UEditor版本是1.3.6,Yii版本是1.1.14。理论上支持UEditor的升级,把新版本解压到resources目录就行,但是UEditor的升级改动也特么太大了,从1.2.6到1.3.6变化很大,差点连设计思路都改了。。。
写缩略图功能的时候就感觉UEditor的论坛都荒废了,除了广告和求助(光求助基本没有解答的)就没有别的内容。围观地址:http://www.ueditorbbs.com/forum.php?mod=viewthread&tid=28631(论坛已删除,换到Github了)
简单来说就是用户在「在线管理」页面点击图片的时候触发了一个beforeInsertImage的事件,因此只要绑定这个事件,在触发的时候将缩略图替换为原始图片就行了。
使用方法
1、将ueditor放在项目的/protected/extensions/目录下。
2、在config.php中配置controllerMap,来指定ueditor的访问路径。
'controllerMap'=>array( 'ueditor'=>array( 'class'=>'ext.ueditor.UeditorController', ), ),
可选配置:
'controllerMap'=>array( 'ueditor'=>array( 'class'=>'ext.ueditor.UeditorController', //文件保存位置 'savePath'=>'upload/', //允许的文件扩展名 'allowFiles'=>array( //上传图片 'image' => array(".gif", ".png", ".jpg", ".jpeg", ".bmp"), //上传附件同时包括 image和file 'file' => array( ".rar" , ".doc" , ".docx" , ".zip" , ".pdf" , ".txt" , ".swf" , ".wmv" ), ), ), ),
一般情况用默认就行,想要做一些修改可以直接看源码,大部分都能通过配置的方法解决。
其中savePath还支持Yii::app()->params['UESavePath']的方式设置。
3、在view中使用widget。 在原有的view中添加即可,注意id填写为原有的textarea的id。如果是用Yii的form组件自动生成的表单,则默认id为「类_属性」的形式,如Post_content,在使用时请确认输入框的id值。
$this->widget('ext.ueditor.UeditorWidget', array( 'id'=>'Post_content' ) );
4、错误排查
使用中出现错误请查看上传目录的权限问题。默认上传到根目录的upload/目录。
不要开启Yii的调试插件(如yii-debug-toolbar,部分调试插件对ajax提交的识别有问题,修正后可以开启),因为UEditor的返回都是json格式,这些调试工具可能会导致返回格式不识别。
出现 TypeError: 'null' is not an object (evaluating 'b.style') 等类似的错误,说明当前页面没有指定id的元素。这个widget只是注册JS,把原有的textarea表单变成UEditor编辑器,因此请不要删除原有的输入框。
github地址:https://github.com/xbzbing/yii1-ueditor
扩展1.3.6的下载地址:
留言交流