Skip to content

zakurdaev/yii2-editorjs-widget

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Editor.js Widget for Yii 2

Editor.js Widget is a wrapper for Editor.js, next generation block styled editor.

Install

The preferred way to install this extension is through composer.

Either run

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

or add

"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

echo \zakurdaev\editorjs\EditorJsWidget::widget([
    'selector' => 'redactor'
]);

Like an ActiveForm widget

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

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.

// 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 for more information.

About

Editor.js widget for Yii 2

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages