yii 继承wangeditor

下载wangeditor https://github.com/wangfupeng1988/wangEditor/releases

在AppAsset.php加入wangEditor.min.js

之前有写过 yii 集成plupload ，里面有写过自定义ActiveForm，现在在那个基础上加上编辑器

namespace common\widgets;

use Yii;
use yii\helpers\Html;
use yii\base\InvalidConfigException;

class HorizontalActiveForm extends \yii\widgets\ActiveForm
{
    /**
     * @var string the default field class name when calling [[field()]] to create a new field.
     * @see fieldConfig
     */
    
    /**
     * @var array HTML attributes for the form tag. Default is `[]`.
     */
    public $options = [];

    /**
     * @var string the form layout. Either 'default', 'horizontal' or 'inline'.
     * By choosing a layout, an appropriate default field configuration is applied. This will
     * render the form fields with slightly different markup for each layout. You can
     * override these defaults through [[fieldConfig]].
     * @see \yii\bootstrap\ActiveField for details on Bootstrap 3 field configuration
     */
    public $layout = 'horizontal';


    /**
     * {@inheritdoc}
     */
    public function init()
    {
        if (!in_array($this->layout, ['default', 'horizontal', 'inline'])) {
            throw new InvalidConfigException('Invalid layout type: ' . $this->layout);
        }

        if ($this->layout !== 'default') {
            Html::addCssClass($this->options, 'form-' . $this->layout);
        }
 
        $this->fieldConfig = [
            'template' => "<div class='row row-box'>
                            <div class='col-xs-2 col-sm-2 text-right'>
                                {label}
                            </div>
                            <div class='col-xs-8 col-sm-8'>
                                {input}
                                <div class='help-hint'>{hint}</div>
                                <div class='help-block'>{error}</div>
                            </div>
                        </div>",
        ];
        parent::init();
    }

    /**
     * {@inheritdoc}
     * @return ActiveField the created ActiveField object
     */
    public function field($model, $attribute, $options = [])
    {
        $options = $this->otherField($attribute, $options);
        return parent::field($model, $attribute, $options);
    }

    private function otherField($attribute, $options) {
        $hidden = '';
        if(isset($options['options']['hidden'])) {
            $hidden = ' hide';
        }
        $data = " data-id='". $attribute ."' ";
        // 其他配置
        if(isset($options['options']['dataset'])) {
            foreach($options['options']['dataset'] as $dk => $dv) {
                $data .= ' data-' . $dk . '="' . $dv . '"';
            }
        }
        if(isset($options['options']['media_field'])) {
            $options = $this->mediaField($attribute, $options, $data, $hidden);
        }
        if(isset($options['options']['rich_field'])) {
            $options = $this->richContent($attribute, $options, $data, $hidden);
        }
        return $options;
    }

    /**
     * 媒体文件
     */
    private function mediaField($attribute, $options, $data, $hidden) {
        $data .= " id='".$attribute."_uploader' ";
        $media_list = '';
        $attachmentId = 0;
        // 媒体信息
        if(isset($options['options']['attachment'])) {
            $attachment = $options['options']['attachment'];
            if(!empty($attachment)) {
                $media_list = '';
                foreach($attachment as $ak => $av) {
                    if($av['type'] == 'video') {
                        $media_list .= '<li><div class="img-info"><video src="' . Yii::$app->params['ossUrl'] . $av['url'] . '"></video><p data-id="' .$av['id']. '">' . $av['url'] . '</p><div class="delete-image"> X </div></div></li>';
                    } else {
                        $media_list .= '<li><div class="img-info"><img src="' . Yii::$app->params['ossUrl'] . $av['url'] . '" /><p data-id="' .$av['id']. '">' . $av['url'] . '</p><div class="delete-image"> X </div></div></li>';
                    }
                    $attachmentId = $av['id'];
                }
            }
        }
        $options = [
            'options' => ['class' => 'form-group' . $hidden],
            'template' => "<div class='row row-box'>
                <div class='col-xs-2 col-sm-2 text-right'>
                    {label}
                </div>
                <div class='col-xs-8 col-sm-8'>
                    <div class='media-picker'>
                        <a class='media-picker-button' ".$data." href='javascript:void(0)'>
                            <span class='fa fa-cloud-upload'></span>
                        </a>
                        <div class='hide media-value'>{input}</div>
                        <div class='hide media-params'>
                            <input type='hidden' name='attachment_id' value='" .$attachmentId . "' />
                            <input type='hidden' name='attachment_type' value='cover' />
                        </div>
                        <div class='help-hint'>{hint}</div>
                        <div class='help-block'>{error}</div>
                        <div class='media-list'>
                        <ul>". $media_list ."</ul>
                        </div>
                    </div>
                </div>
            </div>",
        ];
        return $options; 
    }

    /**
     * 富文本
     */
    private function richContent($attribute, $options, $data, $hidden) {
        $options = [
            'options' => ['class' => 'form-group' . $hidden],
            'template' => "<div class='row row-box'>
                <div class='col-xs-2 col-sm-2 text-right'>
                    {label}
                </div>
                <div class='col-xs-8 col-sm-8'>
                    <div id='content'>

                    </div>
                    <div id='contentText'>{input}</div>
                    <div class='help-hint'>{hint}</div>
                    <div class='help-block'>{error}</div>
                </div>
            </div>",
        ];
        return $options;
    }
}

使用

<?php $form = HorizontalActiveForm::begin(); ?>

    <?= $form->field($model, 'head_attachment_id', [
        'options' =>  [
            'media_field' => true, 
            'dataset' => ['oss-path' => 'teacher'],
            'attachment' => empty($model->headAttachment) ? [] : [ ['id' => $model->head_attachment_id, 'url' => $model->headAttachment->url, 'type' => 'image'] ]
            ]
        ])->hiddenInput()->hint(Yii::t('backend', 'single_upload_hint')) ?>


    <?= $form->field($model, 'content', [
        'options' => [
            'rich_field' => true,
        ]
    ])->textarea(['class' => 'hidden']) ?>


    <?php HorizontalActiveForm::end(); ?>

js

// rich editor
    var E = window.wangEditor;
    var editor = new E('#content');
    var richContent = $('#contentText textarea');
    editor.customConfig.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        richContent.val(html);
    }
    editor.create();
    // 初始化 textarea 的值
    //richContent.val(editor.txt.html());
    editor.txt.html(richContent.val());