netpc / yii2-ueditor
yii2整合ueditor富文本编辑器
Installs: 35
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Language:JavaScript
Type:yii2-extension
Requires
- yiisoft/yii2: ~2.0.0
This package is auto-updated.
Last update: 2024-05-04 17:42:14 UTC
README
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