[更新]UEditor1.4.3-for-Yii1-扩展

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

之前为Yii2写了一个扩展,让我重新认识了InputWidget,当初扩展写的确实有不少问题,今天有个哥们推了我一把,终于把坑填了。

github地址:https://github.com/xbzbing/yii1-ueditor

Yii1-UEditor


项目更名为Yii1-UEditor,采用2推荐的方式重新命名,方便管理。

Yii v1.x UEditor扩展,支持的UEditor版本为1.4.3

测试使用的PHP版本为5.5.9,测试使用的Yii版本是1.1.15,采用alias的方式部署在Ubuntu apache 2.4.7

扩展特性:

支持自动的缩略图管理(默认开启,可以关闭)。

支持水印(默认关闭,可以开启)。

使用TP框架的tpImage来生成和处理图片。

注意:2015.2.2 更新版本与之前并不兼容,本次修改更符合InputWidget的定义,扩展使用时将不在需要原有的输入框。

使用说明


1、将ueditor放在项目的/protected/extensions/目录下。

2、配置UEditor的后台控制器

方法有两种 

1)、自己写controller

/protected/controllers目录新建一个controller,并继承UeditorController,如下:

Yii::import('ext.ueditor.UeditorController');
class EditorController extends UeditorController{
//自定义修改
}

这时候serverUrl为刚才新建的EditorController,在下面配置widget时候要特别注意。

这样做的好处是,可以自定义多种使用场景,较为灵活。

2)配置controllerMap

config.php中配置controllerMap,来指定ueditor的后端控制器。

当有多个使用场景时,可以配置多个map,在widget使用时指定serverUrl即可。

'controllerMap'=>array(
    'ueditor'=>array(
        'class'=>'ext.ueditor.UeditorController',
    ),
),

可选配置:

'controllerMap'=>array(
    'ueditor'=>array(
        'class'=>'ext.ueditor.UeditorController',
        'config'=>array(),//参考config.json的配置,此处的配置具备最高优先级
        'thumbnail'=>true,//是否开启缩略图
        'watermark'=>'',//水印图片的地址,使用相对路径
        'locate'=>9,//水印位置,1-9,默认为9在右下角
    ),
),

这样做的好处是,配置方便快捷,不需要增加额外的controller 

thumbnail属性设置为false,则后台不会生成缩略图。

具体的config配置参考UEditor后端配置项说明

3、在view中使用widget

注意:这里与上一个版本不同,这里需要删除原来的输入框,widget会自动生成。

配合AR使用:

$this->widget('ext.ueditor.UeditorWidget',
        array(
            'model' => $model,
            'attribute' => 'content',
            'htmlOptions' => array('rows'=>6, 'cols'=>50)
));

当作普通表单使用:

$this->widget('ext.ueditor.UeditorWidget',
    array(
        'id'=>'Post_excerpt',
        'name'=>'excerpt_editor',
        'value' => '输入值',
        'config'=>array(
            'serverUrl' => Yii::app()->createUrl('ueditor/'),//指定serverUrl
            'toolbars'=>array(
                array('source','link','bold','italic','underline','forecolor','superscript','insertimage','spechars','blockquote')
            ),
            'initialFrameHeight'=>'150',
            'initialFrameWidth'=>'95%'
        ),
        'htmlOptions' => array('rows'=>3,'class'=>'span12 controls')
));

widget默认的serverUrl为/ueditor,如果自己写了controller或者在controllerMap中配置了多个控制器,那么一定要在widget的配置中增加serverUrl的配置。

thumbnail属性设置为false,则前台不会附加缩略图管理。

具体的config配置参考UEditor前端配置项说明

4、错误排除

  • 出现错误首先应该打开调试工具查看请求返回具体信息。

  • 因为编辑器通常使用场景为后台,所以图片上传等功能默认需要登录权限,如果不需要可以自行修改。

  • 默认上传路径为「应用根目录」,而不是网站根目录,如果上传失败请查看目录权限。

  • 不要开启Yii的调试,因为UEditor的返回都是json格式,开启调试会导致返回格式不识别。

  • 出现404错误可能是因为widget没有正确配置serverUrl

其他说明


UEditor官网  https://ueditor.baidu.com

项目的github地址:https://github.com/xbzbing/yii1-ueditor


留言交流

jack
jack 2015-02-07 15:09 回复
配合AR使用: 这里的AR指的是什么呢?是yii的AR处理事务么?
疯狂的dabing
疯狂的dabing 2015-02-07 23:55 回复
回复 jack : 配合ar指的是在表单中使用model作为数据源,与生成一个普通表单区分开。使用model作为数据源,需要指定model和attribute,这时候跟使用form一样,自动生成表单的name和id。作为普通表单使用,则需要手动指定name,以及id、value等属性。Yii的事务处理得放到controller,不建议在view中使用。
张墨轩
张墨轩 2015-04-21 08:58 回复
我按照你的方法做下来,火狐bug提示ue没找到,什么原因???
疯狂的dabing
疯狂的dabing 2015-04-21 09:15 回复
回复 张墨轩 : 具体的错误提示呢?如果是404了,你打开浏览器调试工具看看具体路径有没有问题,比如url重写是否正常,再看看Yii的asset机制是否正常,assets目录是否拥有写入权限等。
张墨轩
张墨轩 2015-04-21 09:17 回复
回复 疯狂的dabing : 你的qq是多少? 我的110****259,我把图发给你
疯狂的dabing
疯狂的dabing 2015-04-21 09:40 回复
回复 张墨轩 : 确实是个bug,在windows平台下存在,之前没测到,已经修复,感谢反馈。
张墨轩
张墨轩 2015-04-26 02:39 回复
兵哥,怎么单独调用百度编辑器的多图上传、附件、视频这些小插件??
疯狂的dabing
疯狂的dabing 2015-04-26 11:27 回复
回复 张墨轩 : 怎么个单独调用法?后端的话都是通用的,r=ueditor/,上传什么的都可以通过这个来保存;前端调用的话,我看到几篇文章的思路是先实例化ueditor窗体,然后ueditor.hide()隐藏掉,再后边就是用ueditor.getDialog把前端窗口调出来就行了。你可以试试。
11
11 2015-07-23 10:23 回复
serverUrl是什么?
周星星
周星星 2015-08-21 10:45 回复
按照你的配置确实出来了 但是上传图片显示 后端配置项没有正常加载,上传插件不能正常使用! 我应该怎么配置啊 而且 uplaod 目录存在 ,,权限设置了777
疯狂的dabing
疯狂的dabing 2015-08-21 23:13 回复
回复 周星星 : 参考文章最后的错误排查章节。在浏览器按F12打开调试器,看看编辑器加载的时候请求信息具体返回值是什么,另外最新版已经去掉了权限限制,可以去github上看看。
Flyer
Flyer 2016-02-03 10:02 回复
回复 周星星 : 我一开始也是上传图片显示 后端配置项没有正常加载,上传插件不能正常使用,后来好了
点击换图