Ueditor for Yii2
yii2整合ueditor富文本编辑器
基于yii2官方扩展yiisoft/yii2-imagine和UEditor资源包[1.4.3.3 PHP 版本] UTF-8版开发
扩展特点:
1. 支持修改尺寸
2. 支持文字水印
3. 支持图片水印
4. 支持多图上传
Installation
The preferred way to install this extension is through composer.
Either run
php composer.phar require --prefer-dist netpc/yii2-ueditor "*"
composer require --prefer-dist netpc/yii2-ueditor:"dev-master"
or add
"netpc/yii2-ueditor": "*"
to the require section of your composer.json
file.
Update
composer require netpc/yii2-ueditor
Usage
Once the extension is installed, simply use it in your code by :
前端视图:
use netpc\ueditor\UEditor;
<?= UEditor::widget([]); //如无设置id和name,默认从w1自动递增 ?>
<?= UEditor::widget([
'id' => 'txtContent',
'name' => 'txtContent',
'options' => [
'focus' => true,
'toolbars' => [
['fullscreen', 'source', 'undo', 'redo', 'bold'],
],
'serverUrl' => ['/ueditor/index'],//serverUrl指向自定义后端地址
'catchRemoteImageEnable' => false,//默认抓取远程图片
],
'attributes' => [
'style' => 'height:500px'
],
]);
?>
<?= $form->field($model, 'content')->textarea(['rows' => 6])->widget(UEditor::className(), [
'options' => [//详细参考ueditor.config.js
'focus' => true,
'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', 'music', 'attachment', 'map', 'gmap', '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'
],
],
'catchRemoteImageEnable' => false,//设置是否抓取远程图片
],
'attributes' => [
'style' => 'height:80px'
]
]) ?>
后端处理:
通过配置controllerMap路由映射到对应的控制器上
如下:ueditor/index映射到'netpc\ueditor\UEditorController'
有时候后台管理项目backend上传图片和文件等附件,是需要放到前端项目frontend的web目录下,或其它前端项目。
这时候可以配置参数config['webroot']上传目录路径,不设置默认上传到当前项目web目录。
配合imageUrlPrefix设置图片访问路径前缀可以实现图片独立域名
<?php
$config = [
'components' => [
'request' => [
// !!! insert a secret key in the following (if it is empty) - this is required by cookie validation
'cookieValidationKey' => '',
],
],
'controllerMap' => [
'ueditor' => [
'class' => 'netpc\ueditor\UEditorController',
'config' => [
//server config @see http://fex.baidu.com/ueditor/#server-config
'imagePathFormat' => '/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}',//图片
'scrawlPathFormat' => '/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}',//涂鸦
'snapscreenPathFormat' => '/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}',//截图
'catcherPathFormat' => '/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}',//抓取远程
'videoPathFormat' => '/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}',//视频
'filePathFormat' => '/upload/file/{yyyy}{mm}{dd}/{rand:4}_{filename}',//文件文档
'imageManagerListPath' => '/upload/image/',//图片管理列表
//'imageUrlPrefix' => '//img.netpc.com.cn',//图片访问路径前缀
//'imageManagerUrlPrefix' => '//img.netpc.com.cn',//图片管理列表访问路径前缀
'fileManagerListPath' => '/upload/file/',//文件管理列表
// 'fileUrlPrefix' => '//file.netpc.com.cn',//图片访问路径前缀
// 'fileManagerUrlPrefix' => '//file.netpc.com.cn',//文件管理列表访问路径前缀
// 'webroot' => Yii::getAlias('@frontend/web'),//上传图片文件根目录 默认是当前项目Web
],
'resize' => [//修改尺寸,上传图片自动修改为600像素宽度
'width' => 600,//小于600不处理
'height' => 0,//高度为0 不限制高度
],
'watermark' => [//生成水印需官方扩展支持 composer require --prefer-dist yiisoft/yii2-imagine
'path' => '@vendor/netpc/yii2-ueditor/assets/images/watermark.png', //图片水印路径 '@webroot/images/watermark.png'
'text' => 'netpc.com.cn测试', //文字水印内容
//'quality' => 90, //压缩质量
//'fontsize' => 50, //字体大小 默认14
//'fontpath'=> '@webroot/fonts/xxx.ttf',//字体路径 默认Alibaba-PuHuiTi-Heavy.otf不到2m免费商用
//'fontcolor'=> '#000000',//字体颜色 默认#000000
'point' => [-80, -10],//x,y对应width,height 正数实际像素移动 负数图片宽、高减去像素移动 [10, -30]左下 [-200, 10]右上 [-200, -30] 右下
'center' => true,//当center为真时以图片中心点为开始根据point正负偏移,正右移动,负左移动。
'width' => 100,//小于宽度不加水印
'height' => 100,//小于高度不加水印
],
]
],
];
相关链接
@see http://fex.baidu.com/ueditor/
@see https://github.com/yiisoft/yii2-imagine