Yii2自定义Widget,百度编辑器

转载 2015年11月20日 15:42:45



本文抄自yii Framework中文社区,记录在此,方便日后查用



1.把下载好的Ueditor放在 应用/web 目录下
2.在项目应用下创建component目录,分别创建Ueditor.php和UeditorAsset.php文件,依次写入


namespace demo\components;

use yii\helpers\Html;
use yii\helpers\Json;
use yii\widgets\InputWidget;
 
class Ueditor extends InputWidget
{
    public $attributes;
 
    public function init()
    {
        parent::init();
    }
 
    public function run()
    {
        $view = $this->getView();
        $this->attributes['id']=$this->options['id'];
        if($this->hasModel()){
            $input=Html::activeTextarea($this->model, $this->attribute,$this->attributes);
        }else{
            $input=Html::textarea($this->name,'',$this->attributes);
        }
        echo $input;
        UeditorAsset::register($view);//将Ueditor用到的脚本资源输出到视图
        $js='var ue = UE.getEditor("'.$this->options['id'].'",'.$this->getOptions().');';//Ueditor初始化脚本
        $view->registerJs($js, $view::POS_END);//将Ueditor初始化脚本也响应到视图中
    }
 
    public function getOptions()
    {
        unset($this->options['id']);//Ueditor识别不了id属性,故而删之
        return Json::encode($this->options);
    }
}

namespace demo\components;
 
use yii\web\AssetBundle;
 
class UeditorAsset extends AssetBundle
{
    public $js = [
        'ueditor.config.js',
        'ueditor.all.js',
    ];
    public $css = [
    ];
    public function init()
    {
        $this->sourcePath =$_SERVER['DOCUMENT_ROOT'].\Yii::getAlias('@web').'/ueditor'; //设置资源所处的目录
    }
}

注意: 命名空间一定要和文件所在的目录结构是一致的,否则会出现Class not found异常

  1. View中使用

非ActiveForm(name和id参数必须传递,用来控制初始化脚本)

use demo\components\Ueditor;
 
echo Ueditor::widget([
    'name'=>'content',
    'options'=>[
        'id'=>'txtContent',
        'focus'=>true,
        'toolbars'=> [
            ['fullscreen', 'source', 'undo', 'redo', 'bold']
        ],
    ],
    'attributes'=>[
        'style'=>'height:80px'
    ]
]);

ActiveForm中

$form->field($model, 'content')->widget(Ueditor::className(),[
    'options'=>[
        'focus'=>true,
        'toolbars'=> [
            ['fullscreen', 'source', 'undo', 'redo', 'bold']
        ],
    ],
    'attributes'=>[
        'style'=>'height:80px'
    ]
])

总结:
自定义组件的过程很简单,我们拿Ueditor举例,步骤如下

1.输出 input 控件

2.注册 Ueditor 用到的脚本文件

3.注册 Ueditor 初始化脚本

4.定义好变量,传递参数(完善组件)

Ueditor更多属性及设置见:http://fex.baidu.com/ueditor/#start-config



更新

在UeditorAsset中不是设置sourcePath而是设置basePath和baseUrl,就不会将资源发布到asserts中去。因为这个导致好几次调试时修改了代码不起作用,才发现页面调用的是asserts中随机文件夹中的代码,而不是放在本地的源代码。


摘自中文文档:

资源发布

如前所述,如果资源包放在Web不能访问的目录,当视图注册资源时资源会被拷贝到一个Web可访问的目录中, 这个过程称为资源发布,yii\web\AssetManager会自动处理该过程。

资源默认会发布到@webroot/assets目录,对应的URL为@web/assets, 可配置yii\web\AssetManager::basePath 和 yii\web\AssetManager::baseUrl 属性自定义发布位置。



YII2下使用百度编辑器扩展yii2-ueditor

yii2-ueditor的安装 Yii2是使用composer来管理扩展的 Composer地址: https://packagist.org/packages/wenyuan/yii2-uedi...
  • baihe_soft
  • baihe_soft
  • 2014年12月25日 10:20
  • 5344

Yii2.0-advanced-7—Yii2.0使用百度文本编辑器Ueditor

资源下载: 扩展下载(yii2.0-ueditor) 框架下载(Yii 2.0.6 高级版) 描述: 最佳适用于yii2.0 高级版(advanced)应用框架,对于基础板(basic)及其...
  • wlzx120
  • wlzx120
  • 2017年01月09日 13:38
  • 1166

Yii2 集成ueditor脚手架

Yii2 集成ueditor脚手架
  • lx1607
  • lx1607
  • 2015年12月25日 16:22
  • 898

[widget] -- yii2小部件高级使用

原文链接 : http://blog.csdn.net/maclechan/article/details/46240183 (yii2.0高级应用) 注:以下布局未使用iframe! ...
  • lmjy102
  • lmjy102
  • 2017年01月11日 14:48
  • 1585

Yii2 集成ueditor脚手架

Yii2 集成ueditor脚手架
  • lx1607
  • lx1607
  • 2015年12月25日 16:22
  • 898

YII widget之dropDownList的二级联动与分组

第一建表: CREATE TABLE IF NOT EXISTS `sw_category` ( `id` int(11) NOT NULL auto_increment, `parent_i...
  • slyjit
  • slyjit
  • 2013年12月09日 16:00
  • 1858

yii框架-yii2分页的使用与扩展(十五)

今天主要是总结一下如何使用yii2中分页功能,从下面三个方面来讲。 (1)分页的使用 (2)分页类LinkPager和Pagination都可以自定义哪些属性 (3)分页类LinkPager如何扩展成...
  • u012979009
  • u012979009
  • 2016年06月24日 14:47
  • 5246

yii2-GridView在开发中常用的功能及技巧

GridView 小部件在开发中常用的功能及技巧。 数据网格或者说 GridView 小部件是Yii中最强大的部件之一。 它有一个属性名叫 dataProvider ,这个属性能够提供一个数据提供者...
  • mingzhehaolove
  • mingzhehaolove
  • 2016年03月31日 10:43
  • 2265

Yii2-GridView 自定义关联字段带搜索和排序功能

要在订单(Order)视图的gridview中显示出客户(Customer)姓名,并使其具有与其它字段相同的排序和搜索功能。 数据库结构 订单表order含有字段customer_id 与 客户表...
  • xmlife
  • xmlife
  • 2016年09月18日 11:41
  • 2308

yii2分页的使用及其扩展

yii2分页的使用及其扩展
  • m_422744746
  • m_422744746
  • 2016年05月21日 13:28
  • 3695
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Yii2自定义Widget,百度编辑器
举报原因:
原因补充:

(最多只允许输入30个字)