Yii wangeditor Widget

wangeditor是一个轻量编辑器，地址

http://www.wangeditor.com/

首先我使用了yii2-bootstrap，所以widget继承自yii\bootstrap\InputWidget

wangeditor怎么使用官网很详细，怎么集成php也很多案例，直接上代码：

use Yii;
use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use yii\bootstrap\InputWidget;
use yii\web\AssetBundle;

class WangEditor extends InputWidget {

    public $pluginOptions = [];
 
    public function init()
    {
        parent::init();
    }
 
    public function run()
    {
        $view = $this->getView();

        $classOptions = [
            'class' => 'hide'
        ];
        
        $this->options = array_merge($this->options, $classOptions);
        $input =  Html::textarea($this->name, $this->value, $this->options);
        if ($this->hasModel()) {
            $input =  Html::activeTextarea($this->model, $this->attribute, $this->options);
        }
        
        $inputTemplate = "<div id='content'></div><div id='contentText'>" . $input . "</div>";
        echo $inputTemplate;
    
        WangEditorAsset::register($view);


        $js = "var E = window.wangEditor;";
        $js .= "var editor = new E('#content');";
        $js .= "var richContent = jQuery('#contentText textarea');";
        $js .= "editor.customConfig.onchange = function (html) { richContent.val(html); };";
        $js .= "editor.customConfig.uploadImgServer = '/uploads';";
        $js .= "editor.customConfig.menus = ['head', 'bold', 'fontSize', 'fontName', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'undo', 'redo'];";
        $js .= "editor.create();";
        $js .= "editor.txt.html(richContent.val());";
       
        $view->registerJs($js);
    }

}

class WangEditorAsset extends AssetBundle
{
    public $js = [
        'plugins/richeditor/wangEditor.min.js',
    ];

    public function init()
    {
        parent::init();
    }
}

使用

$form->field($model, 'content')->widget(common\widgets\WangEditor::classname());

 

修改：

使用上传图片：

namespace common\widgets;

use Yii;
use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use yii\bootstrap\InputWidget;
use yii\web\AssetBundle;

class WangEditor extends InputWidget {

    public $pluginOptions = [];
 
    public function init()
    {
        parent::init();
    }
 
    public function run()
    {
        $view = $this->getView();

        $classOptions = [
            'class' => 'hide'
        ];

        $this->options = array_merge($this->options, $classOptions);
        $input =  Html::textarea($this->name, $this->value, $this->options);
        if ($this->hasModel()) {
            $input =  Html::activeTextarea($this->model, $this->attribute, $this->options);
        }
        
        $inputTemplate = "<div id='content'></div><div id='contentText'>" . $input . "</div>";
        echo $inputTemplate;
    
        WangEditorAsset::register($view);

        $css = '.w-e-text-container{ height: 600px !important; }';
        $view->registerCss($css);


        /*$js = "var E = window.wangEditor;";
        $js .= "var editor = new E('#content');";
        $js .= "var richContent = jQuery('#contentText textarea');";
        $js .= "editor.customConfig.onchange = function (html) { richContent.val(html); };";
        //$js .= "editor.customConfig.uploadImgServer = '/uploads';";
        $js .= "editor.customConfig.menus = ['head', 'bold', 'fontSize', 'fontName', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'image', 'list', 'justify', 'quote', 'undo', 'redo'];";
        $js .= "editor.create();";
        $js .= "editor.txt.html(richContent.val());";
        $js .= "editor.config.customUploadInit = wanguploader.init(); ";
       
        $view->registerJs($js);*/
    }

}

class WangEditorAsset extends AssetBundle
{
    public $js = [
        'plugins/richeditor/wangEditor.min.js',
        'js/editor.js',
    ];

    public function init()
    {
        parent::init();
    }
}

 

js

$(document).ready(function() {
    var baseBackend = window.location.protocol + "//" +window.location.host;

    var E = window.wangEditor;
    var editor = new E('#content');
    var richContent = jQuery('#contentText textarea');
    editor.customConfig.onchange = function (html) { richContent.val(html); };
    //editor.customConfig.uploadImgServer = '/uploads';
    editor.customConfig.zIndex = 99;
    editor.customConfig.menus = ['head', 'bold', 'fontSize', 'fontName', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'image', 'list', 'justify', 'quote', 'undo', 'redo'];
    editor.create();
    editor.txt.html(richContent.val());
   
       

    // 图片上传
    var token = $('meta[name="csrf-token"]').attr('content');
    var wanguploader = new plupload.Uploader({
        runtimes: 'html5,flash,silverlight,html4',
        browse_button: editor.imgMenuId,
        url: baseBackend + '/uploader/uploader',
        file_data_name: 'ysx_media',
        multi_selection: true,
        multipart_params: { 'updir': 'detail', '_token': token },
        auto_start: true,
        flash_swf_url: '../plupload/js/Moxie.swf',
        silverlight_xap_url: '../plupload/js/Moxie.xap',

        filters: {
            mime_types: [ //只允许上传图片和zip,rar文件
                { title: "Image files", extensions: "jpg,jpeg,gif,png,bmp" },
            ],
            max_file_size: '10mb', //最大只能上传10mb的文件
            prevent_duplicates: false //不允许选取重复文件
        },

        init: {
            PostInit: function() {
                
            },
            FilesAdded: function(up) {
                up.start(); //选择完后直接上传
            },

            FileUploaded: function(up, file, info) {
                if (info.status == 200) {
                    var fileType = file.type;
                    // 获取返回德数据
                    var fileInfos = $.parseJSON(info.response);
                    if(fileInfos.error == 0) {
                        var fileAttachementId = fileInfos.attachement_id
                        var fileUrl = fileInfos.url;
                     
                        editor.cmd.do('insertHtml', '<img src="' + fileUrl + '" style="width: auto; max-width:100%;"/>');
                    } else {
                        alert(fileInfos.msg);
                    }
                } else {
                    alert(info.response);
                }
            },

            Error: function(up, err) {
                if (err.code == -600) {
                    alert("\n选择的文件太大了,可以根据应用情况，在upload.js 设置一下上传的最大大小");
                } else if (err.code == -601) {
                    alert("\n选择的文件后缀不对,可以根据应用情况，在upload.js进行设置可允许的上传文件类型");
                } else if (err.code == -602) {
                    alert("\n这个文件已经上传过一遍了");
                } else {
                    alert("\nError xml:" + err.response);
                }
            }
        }
    })
    
    editor.config.customUploadInit = wanguploader.init(); 
})