bigdropinc/yii2-image-manager-mongo

用于MongoDB上传、管理和裁剪图像的Yii2模块/小部件

安装次数: 3,729

依赖者: 0

建议者: 0

安全性: 0

星标: 0

关注者: 2

分支: 61

类型:yii2-extension


README

一个用于上传、管理和裁剪图像的Yii2模块/小部件

安装

安装此扩展的首选方式是通过 composer.

  • 运行以下命令之一
php composer.phar require "bigdropinc/yii2-image-manager-mongo" "*" 

"bigdropinc/yii2-image-manager-mongo" : "*"

将以下内容添加到您应用程序的 composer.json 文件的require部分。

  • 在您应用程序的配置文件中的components部分添加一个新的组件,例如
'components' => [
    'imagemanager' => [
		'class' => 'noam148\imagemanager\components\ImageManagerGetPath',
		//set media path (outside the web folder is possible)
		'mediaPath' => '/path/where/to/store/images/media/imagemanager',
		//path relative web folder to store the cache images
		'cachePath' => ['assets/images'],
		//use filename (seo friendly) for resized images else use a hash
		'useFilename' => true,
		//show full url (for example in case of a API)
		'absoluteUrl' => false,
		'databaseComponent' => 'db' // The used database component by the image manager, this defaults to the Yii::$app->db component
        'useTinyPng' => true,
       
        'useS3' => true,
        's3Configuration' => [
            'key' => 'key',
            'secret' => 'key123',
	        's3Url' => 'https://:9001/',
            //endpoint set only for local version of services such as minio
            'endpoint' => 'https://:9000',
            'defaultBucket' => 'default',
        ]
	],
],

并在modules部分,例如

'modules' => [
	'imagemanager' => [
		'class' => 'noam148\imagemanager\Module',
		//set accces rules ()
		'canUploadImage' => true,
		'canRemoveImage' => function(){
			return true;
		},
		'deleteOriginalAfterEdit' => false, // false: keep original image after edit. true: delete original image after edit
		// Set if blameable behavior is used, if it is, callable function can also be used
		'setBlameableBehavior' => false,
		//add css files (to use in media manage selector iframe)
		'cssFiles' => [
			'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css',
		],
	],
],

使用方法

Image manager module Image manager module cropper

要加载图像选择器,请参阅以下内容(确保您在表中有一个字段,模块可以存储ImageManager表的'id')

echo $form->field($model, 'ImageManager_id_avatar')->widget(\noam148\imagemanager\widgets\ImageManagerInput::className(), [
	'aspectRatio' => (16/9), //set the aspect ratio
    'cropViewMode' => 1, //crop mode, option info: https://github.com/fengyuanchen/cropper/#viewmode
	'showPreview' => true, //false to hide the preview
	'showDeletePickedImageConfirm' => false, //on true show warning before detach image
	'multiple' => false,
    'models' => $models, //selected models
]);

Image widget Image widget popup

如果您想使用图像

/*
 * $ImageManager_id (id that is store in the ImageManager table)
 * $width/$height width height of the image
 * $thumbnailMode = "outbound" or "inset"
 */
\Yii::$app->imagemanager->getImagePath($ImageManager_id, $width, $height,$thumbnailMode)

支持CKEditor & TinyMce

要在CKEditor中使用文件浏览器,请将filebrowserImageBrowseUrl添加到CKEditor小部件的clientOptions中。我只在2amigOS的CKEditor上进行了测试,但它需要适用于其他CKEditor小部件。

use dosamigos\ckeditor\CKEditor;

 echo $form->field($model, 'text')->widget(CKEditor::className(), [
	'options' => ['rows' => 6],
	'preset' => 'basic',
	'clientOptions' => [
		'filebrowserImageBrowseUrl' => yii\helpers\Url::to(['imagemanager/manager', 'view-mode'=>'iframe', 'select-type'=>'ckeditor']),
	]
]);

要在TinyMce中使用文件浏览器,请将file_browser_callback添加到TinyMce小部件的clientOptions中。我只在2amigOS的TinyMce上进行了测试,但它需要适用于其他TinyMce小部件。(不要忘记将'image'添加到您的'plugins'数组中)

use dosamigos\tinymce\TinyMce;

echo $form->field($model, 'text')->widget(TinyMce::className(), [
	'options' => ['rows' => 6],
	'language' => 'nl',
	'clientOptions' => [
		'file_browser_callback' => new yii\web\JsExpression("function(field_name, url, type, win) {
			window.open('".yii\helpers\Url::to(['imagemanager/manager', 'view-mode'=>'iframe', 'select-type'=>'tinymce'])."&tag_name='+field_name,'','width=800,height=540 ,toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no');
		}"),
		'plugins' => [
			"advlist autolink lists link charmap print preview anchor",
			"searchreplace visualblocks code fullscreen",
			"insertdatetime media table contextmenu paste image"
		],
		'toolbar' => "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
	]
]);

如果您有任何问题、技巧或反馈,请告诉我!