https://github.com/zakurdaev/yii2-editorjs-widget

Editor.js widget for Yii 2
https://github.com/zakurdaev/yii2-editorjs-widget

Last synced: 3 months ago
JSON representation

Editor.js widget for Yii 2

• Host: GitHub
• URL: https://github.com/zakurdaev/yii2-editorjs-widget
• Owner: zakurdaev
• License: bsd-3-clause
• Created: 2020-05-11T17:55:41.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-05-12T17:04:46.000Z (over 4 years ago)
• Last Synced: 2024-07-09T13:03:27.558Z (4 months ago)
• Language: PHP
• Size: 158 KB
• Stars: 7
• Watchers: 2
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-editorjs - yii2-editorjs-widget

README

        
# Editor.js Widget for Yii 2

`Editor.js Widget` is a wrapper for [Editor.js](https://github.com/codex-team/editor.js), next generation block styled editor.

## Install

The preferred way to install this extension is through [composer](http://getcomposer.org/download/).

Either run

```bash

$ php composer.phar require --prefer-dist zakurdaev/yii2-editorjs-widget "*"

```

or add

```json

"zakurdaev/yii2-editorjs-widget": "*"

```

to the `require` section of your `composer.json` file.

## Usage

Once the extension is installed, simply use it in your code:

### Like a widget

```php

echo \zakurdaev\editorjs\EditorJsWidget::widget([

    'selector' => 'redactor'

]);

```

### Like an ActiveForm widget

```php

use \zakurdaev\editorjs\EditorJsWidget;

echo $form->field($model, 'content_json')->widget(EditorJsWidget::class, [

 'selectorForm' => $form->id

])->label();

```

### Supported block

The plugin is able to support all blocks for Editor.js. You can use the standard Asset or use Asset CDN or write your own.

#### EditorJsAsset

Include: 

* editorjs/header v2.4.1

* editorjs/paragraph v2.6.1

* editorjs/image v2.3.4

* editorjs/list v1.4.0

* editorjs/table v1.2.2

* editorjs/quote v2.3.0

* editorjs/warning v1.1.1

* editorjs/code v2.4.1

* editorjs/embed v2.3.1

* editorjs/delimiter v1.1.0

* editorjs/inline-code v1.3.1

#### Custom Asset

```php

use \zakurdaev\editorjs\EditorJsWidget;

echo $form->field($model, 'content_json')->widget(EditorJsWidget::class, [

 'selectorForm' => $form->id,

 'assetClass' => 'YOUR/PATH/TO/ASSET'

])->label();

```

### Upload image by file and url

Widget supports image loading for [Editor.js Image Block](https://github.com/editor-js/image).

```php

// SiteController.php

public function actions()

{

    return [

        'upload-file' => [

            'class' => UploadImageAction::class,

            'mode' => UploadImageAction::MODE_FILE,

            'url' => 'https://example.com/upload_dir/',

            'path' => '@app/web/upload_dir',

            'validatorOptions' => [

                'maxWidth' => 1000,

                'maxHeight' => 1000

            ]

        ],

        'fetch-url' => [

            'class' => UploadImageAction::class,

            'mode' => UploadImageAction::MODE_URL,

            'url' => 'https://example.com/upload_dir/',

            'path' => '@app/web/upload_dir'

        ]

    ];

}

// view.php

echo \zakurdaev\editorjs\EditorJsWidget::widget([

    'selector' => 'redactor',

    'endpoints' => [

        'uploadImageByFile' => Url::to(['/site/upload-file']),

        'uploadImageByUrl' => Url::to(['/site/fetch-url']),

    ],

]);

```

## License

The BSD License (BSD).Please see [License File](LICENSE.md) for more information.