simialbi / yii2-summernote
Yii2 Summernote widget. Super simple WYSIWYG editor on Bootstrap
Installs: 2 108
Dependents: 9
Suggesters: 4
Security: 0
Stars: 3
Watchers: 1
Forks: 33
Open Issues: 1
Type:yii2-extension
Requires
- php: >=7.3
- bower-asset/codemirror: @stable
- bower-asset/summernote: ^0.8.20
- yiisoft/yii2: ^2.0.20
Requires (Dev)
- aws/aws-sdk-php: ^3.148.0
- yiisoft/yii2-coding-standards: ~2.0
Suggests
- aws/aws-sdk-php: Needed if you like to use upload on Amazon S3
Replaces
- marqu3s/yii2-summernote: ^1.0.0
README
Yii2 Summernote widget. Super simple WYSIWYG editor on Bootstrap
Installation
Composer
The preferred way to install this extension is through Composer.
Either run
php composer.phar require marqu3s/yii2-summernote "dev-master"
or add
"marqu3s/yii2-summernote": "dev-master"
to the require section of your composer.json
Usage
<?php use marqu3s\summernote\Summernote; /** @var $form \yii\widgets\ActiveForm */ /** @var $model \yii\base\Model */ echo $form->field($model, 'content')->widget(Summernote::class, [ 'clientOptions' => [ // ... ] ]);
or
<?php use marqu3s\summernote\Summernote; echo Summernote::widget([ 'name' => 'editor_id', 'clientOptions' => [ // ... ] ]);
Bootstrap version
By default \marqu3s\summernote\SummernoteAsset
loads Bootstrap 4 compatible Version of Summernote.
If you need Boostrap 3 compatible version, configure your application like this:
'assetManager' => [ 'bundles' => [ 'marqu3s\summernote\SummernoteAsset' => [ 'css' => [ 'summernote.css' ], 'js' => [ 'summernote.js' ], 'depends' => [ 'yii\bootstrap\BootstrapPluginAsset', ] ] ] ]
If you need Bootstrap 5 compatible one, the configuration would look like this:
'assetManager' => [ 'bundles' => [ 'marqu3s\summernote\SummernoteAsset' => [ 'css' => [ 'summernote-bs5.css' ], 'js' => [ 'summernote-bs5.js' ], 'depends' => [ 'yii\bootstrap\BootstrapPluginAsset', ] ] ] ]
Uploading directly to Amazon S3
To upload images inserted into the editor to S3, you have to configure a few options.
<?php use marqu3s\summernote\Summernote; /** @var $model \yii\base\Model */ echo Summernote::widget([ 'uploadToS3' => true, 'signEndpoint' => '/<controller>/sign-aws-request?v4=true', 'bucket' => 'S3-BUCKET-NAME', //'folder' => '', 'folder' => new \yii\web\JsExpression("function() { return $('#aFormFieldId').val() + '/'; }"), 'filenamePrefix' => "'{$model->id}-'", 'maxFileSize' => 1024000, 'expiration' => gmdate('Y-m-d\TH:i:s.000\Z', strtotime('+5 minutes')), 'clientOptions' => [ ... ] ]);
Then, in your controller, configure an action as the signEndpoint to sign the POST request that will upload the image.
<?php public function actions() { return [ 'sign-aws-request' => [ 'class' => 'marqu3s\summernote\actions\SignAwsRequestAction', 'clientPrivateKey' => 'AWS-KEY', 'clientPrivateSecret' => 'AWS-SECRET', 'expectedBucketName' => 'BUCKET-NAME', 'expectedHostName' => 'BUCKET-NAME', 'expectedMaxSize' => 'MAX-FILE-SIZE' ] ]; }
See clientOptions
Original Author
Aleksandr Zelenin, e-mail: aleksandr@zelenin.me
Updates by
João Marques, e-mail: joao@jjmf.com