yii ueditor使用教程 [ 2.0 版本 ]

1. 安装

composer 安装方式

composer require kucha/ueditor "*"

很慢 我是直接拷贝的

2. 参数配置

在params中配置如下

/* UEditor编辑器配置 */
'ueditorConfig' => [
/* 图片上传配置 */
'imageRoot'            => Yii::getAlias("@frontend/web/storage"), //图片存放的位置
'imageUrlPrefix'       => 'http://www.jay.com/storage', //img 引用图片url前缀 （自己域名下存放图片的文件夹名）
'imagePathFormat'      => '/image/{yyyy}{mm}/editor{time}{rand:6}',

/* 文件上传配置 */

'fileRoot'             => Yii::getAlias("@frontend/web/storage"), //文件path前缀
'fileUrlPrefix'        =>'http://www.jay.com/storage',//文件url前缀
'filePathFormat'       => '/file/{yyyy}{mm}/editor{rand:4}_{filename}',

/* 上传视频配置 */
'videoRoot'            => Yii::getAlias("@frontend/web/storage"), // 服务器解析到/web/目录时，上传到这里
"videoUrlPrefix"       => 'http://www.jay.com/storage',
'videoPathFormat'      => '/video/{yyyy}{mm}/editor{time}{rand:6}',

/* 涂鸦图片上传配置项 */
'scrawlRoot'           => Yii::getAlias("@frontend/web/storage"), // 服务器解析到/web/目录时，上传到这里
"scrawlUrlPrefix"      =>'http://www.jay.com/storage',
'scrawlPathFormat'     => '/image/{yyyy}{mm}/editor{time}{rand:6}',
],

3. 引用

controller层

$model = new DbArticle();//你的表模型
return $this->render('index',['model' => $model]);

view层

<?=$form->field($model, 'content')->widget('kucha\ueditor\UEditor',[
    'clientOptions' => [
        'serverUrl' => Url::to(['/public/ueditor']),//确保serverUrl正确指向后端地址
        'lang' =>'zh-cn', //中文为 zh-cn
        'initialFrameWidth' => '100%',
        'initialFrameHeight' => '400',
        
        'toolbars' => [
            [
                'fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo',  'attachment', 'map', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                'print', 'preview', 'searchreplace', 'drafts', 'help'
            ],
        ]
    ]
],['class'=>'c-md-7'])->label('文章内容');?>

4. 使用过程中碰到的问题

1.ueditor 引用的问题 因为是直接拷贝的 使用过程中 提示ueditor 未找到
需要手动去引用加载

include_once __DIR__ .'/../../../vendor/kucha/ueditor/UEditor.php';
include_once __DIR__ .'/../../../vendor/kucha/ueditor/UEditorAsset.php';

view 层 serverUrl ueditor会检查后端配置是否正确的请求

Request URL:http://www.jay.com/public/ueditor?action=config&&noCache=1515548693108

在public控制器中定义一个外部的控制器引用

public function actions()
{

include_once __DIR__ .'/../../vendor/kucha/ueditor/UEditorAsset.php';
include_once __DIR__ .'/../../vendor/kucha/ueditor/UEditorAction.php';
return ArrayHelper::merge(parent::actions(), [

/* ueditor文件上传 */
'ueditor' => [
'class' => '\kucha\ueditor\UEditorAction',
'config' => Yii::$app->params['ueditorConfig'],
],

]);
}

这样就大功告成了
附上截图一份