百度编辑器UEditor的Yii扩展

这篇日志发布时间已经超过一年,许多内容可能已经失效,请读者酌情参考。

扩展已经升级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  

13972190023218.png

一点说明

虽然在若干年前。。。已经有了很多百度编辑器的扩展,但是总觉得用着别扭,而且版本都比较低。于是自己写了个。

  • 上传图片自动生成缩略图。这里使用了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的下载地址:

yii-ext-ueditor136.tar.gz


留言交流

steven
steven 2014-04-22 11:44 回复
TypeError: 'null' is not an object (evaluating 'b.style') 加入后提示这个,编辑器不出现。
疯狂的dabing
疯狂的dabing 2014-04-22 15:52 回复
回复 steven : 我知道了。。你是不是原有的页面没有那个id=Post_content的元素啊?
steven
steven 2014-04-22 11:45 回复
感谢分享~~~,求解决方案。
疯狂的dabing
疯狂的dabing 2014-04-22 15:32 回复
回复 steven : 看起来是js错误,可能是跟原有的js冲突了。具体情况这里可能说不清,还是通过邮箱把具体信息发过来看看吧。联系方式已发你邮箱。
abel
abel 2014-06-10 22:08 回复
为什么上传图片 选择保存目录:这里把目录名称全分隔成一个字符一个字符的
abel
abel 2014-06-10 22:42 回复
开始上传返回404错误
疯狂的dabing
疯狂的dabing 2014-06-11 16:38 回复
回复 abel : 一个字符一个的?404错误?这么说我也不清楚啊。。。后端的话是保存在应用根目录的upload文件夹,1.3.6的扩展是按照image/上传日期/随机名称存放的。404错误建议你打开调试工具,看看请求返回具体内容做调试,如果是404的话可能是配置文件config中没有配置controllerMap。如果还是解决不了,可以邮件我xbzbing#gmail.com
name
name 2014-07-25 14:11 回复
iframe下为什么不引用资源啊
疯狂的dabing
疯狂的dabing 2014-07-26 23:57 回复
回复 name : QQ已联系,建议使用新版本。http://www.crazydb.com/archive/UEditor1.4.3-for-Yii1-扩展
ding
ding 2014-07-31 18:45 回复
本地测试没有问题,上传到空间,报错。在 UeditorWidget 71行 :修改为 $this->_assetUrl = $assetManager->publish(dirname(__FILE__).'/resources' ); 可以调出富文本。但是选择上传图片,提示后端配置项没有正常加载,上传插件不能正常使用! 不知道如何解决
疯狂的dabing
疯狂的dabing 2014-08-02 16:05 回复
回复 ding : 首先,__DIR__==direname(__FILE__),这个修改无实际改变。然后,UE在初次加载的时候会从后台请求config信息,如果请求的内容不符合预期就会显示“后端配置项没有正常加载”。请使用调试工具查看具体返回信息,一般出现这个错误,是因为开启了Yii调试。请查看文章错误排查一节。最后建议使用1.4.3版本,参考地址http://www.crazydb.com/archive/UEditor1.4.3-for-Yii1-扩展。
zhuzhenyu
zhuzhenyu 2014-11-02 02:32 回复
Uncaught TypeError: Cannot read property 'style' of null ueditor.all.min.js:706 楼主。好像js有问题。能否解决下.yii-1.1.15版本、
zhuzhenyu
zhuzhenyu 2014-11-02 02:34 回复
回复 zhuzhenyu : 用的1.4.3扩展
zhuzhenyu
zhuzhenyu 2014-11-02 02:40 回复
回复 zhuzhenyu : 不好意思,我没看清,原来要手动写textarea.没问题了
疯狂的dabing
疯狂的dabing 2014-11-03 09:24 回复
回复 zhuzhenyu : 是的。扩展只是将原有的textarea变成富文本编辑器,而不能直接替换原有的textarea。这样做的话可以在不破坏原有代码结构的情况下使用扩展。
dd
dd 2016-11-07 10:19 回复
我看了你Github里的ueditor yii2版本的,我就想知道,如何在不同的controller下图片上传不到文件夹里
点击换图