Eseperio/yii2-grapesjs

Yii2 GrapesJs AssetBundle, Actions and module

Grapesjs AssetBundle and widgets

Grapesjs AssetBundle, widgets and module

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist thecodeholic/yii2-grapesjs "^v0.1.0"

or add

"thecodeholic/yii2-grapesjs": "^v0.1.0"

to the require section of your composer.json file.

Configuration

Once the module is installed, you need to run migrations:

php yii migrate --migrationPath=@vendor/thecodeholic/yii2-grapesjs/migrations

And add module in your config modules

'modules' => [
    'grapesjs' => [
        'class' => \thecodeholic\yii2grapesjs\Module::class,
        // custom placeholder variables which will be added into richtext
        // default is empty array
        'grapesJsVariables' => [
            '{first_name}' => 'First Name',
            '{last_name}' => 'Last Name',
            '{age}' => 'Age',
        ]
    ],
    ...
]

Configuring AssetManager

The package uses Yii::$app->fs so you need to configure fs component to be one of the available targets of creocoder\flysystem

Checkout its documentation if you want to specify different targets https://github.com/creocoder/yii2-flysystem

And you need to install your desired target.

For example

composer require creocoder/yii2-flysystem

Using the widget in your own controller

If you do not want to use the module and integrate in your controller, you should add JsonParser in request parser's.

'request' => [
    'parsers' => [
        'application/json' => 'yii\web\JsonParser',
    ]
]

Display the widget in your view file.

<?php echo \thecodeholic\yii2grapesjs\widgets\GrapesjsWidget::widget([
    'clientOptions' => [
        'storageManager' => [
            'id' => '',
            'type' => 'remote',
            'stepsBeforeSave' => 1,
            'urlStore' => "save?id=$model->id",
            'urlLoad' => "get?id=$model->id",
        ],
        'assetManager' => [
            'upload' => "upload"
        ],
        'deviceManager' => [
            'defaultDevice' => 'Resolution 2',
            'devices' => [
                [
                    'name' => 'Resolution 1',
                    'width' => '850px',
                    'widthMedia' => '992px'
                ],
                [
                    'name' => 'Resolution 2',
                    'width' => '750px',
                ],
                [
                    'name' => 'Resolution 3',
                    'width' => '650px'
                ],
                [
                    'name' => 'Resolution 4',
                    'width' => '450px',
                ],
                [
                    'name' => 'Resolution 5',
                    'width' => '375px',
                ]
            ]
        ]
    ],
    // custom placeholder variables which will be added into richtext
    // default is empty array
    'variables' => [
        '{first_name}' => 'First Name',
        '{last_name}' => 'Last Name',
        '{age}' => 'Age',
    ]
]) ?>

Add the following actions to your controller.

public function actions()
{
    return array_merge(parent::actions(), [
        'get' => [
            'class' => \thecodeholic\yii2grapesjs\actions\GetAction::class,
            // If includeFields is presented `excludeFields` are not considered
            // 'includeFields' => ['css', 'html'],
            // Exclude assets column from returned fields of the Content model
            'excludeFields' => ['assets']
        ],
        'save' => \thecodeholic\yii2grapesjs\actions\SaveAction::class,
        'upload' => \thecodeholic\yii2grapesjs\actions\UploadAction::class
    ]);
}