README

Editor.js Widget 是 Editor.js 的封装，下一代块样式编辑器。

安装

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

运行以下命令之一

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

或者将以下内容添加到你的 composer.json 文件的 require 部分：

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

to the require section of your composer.json file.

使用方法

一旦扩展被安装，只需在代码中使用它即可

就像一个小部件

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

就像一个 ActiveForm 小部件

use \zakurdaev\editorjs\EditorJsWidget;

echo $form->field($model, 'content_json')->widget(EditorJsWidget::class, [
 'selectorForm' => $form->id
])->label();

支持的块

该插件能够支持 Editor.js 的所有块。你可以使用标准的 Asset 或者使用 Asset CDN，或者编写你自己的。

EditorJsAsset

包含

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

自定义 Asset

use \zakurdaev\editorjs\EditorJsWidget;

echo $form->field($model, 'content_json')->widget(EditorJsWidget::class, [
 'selectorForm' => $form->id,
 'assetClass' => 'YOUR/PATH/TO/ASSET'
])->label();

通过文件和 URL 上传图片

小部件支持 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']),
    ],
]);

许可证

BSD 许可证（BSD）。有关更多信息，请参阅许可证文件。

zakurdaev / yii2-editorjs-widget

维护者

详细信息