README

Laravel Nova 4 的 Editor.js 实现

基于 @advoor 的包。

安装

通过 composer 安装

composer require advoor/nova-editor-js

发布配置文件

php artisan vendor:publish --provider="Advoor\NovaEditorJs\FieldServiceProvider"

使用方法

将此 use 语句添加到 Nova 资源文件的顶部

use Advoor\NovaEditorJs\NovaEditorJs;

如下使用字段

NovaEditorJs::make('FieldName');

搞定！

您可以在配置文件中配置 Editor 应用的工具以及其他设置，请务必查看 :)

您可以使用内置函数生成前端响应

NovaEditorJs::generateHtmlOutput($user->about);

每个 'block' 都有自己的视图，可以在 resources/views/vendor/nova-editor-js/ 中覆盖

包含的工具

• https://github.com/editor-js/header
• https://github.com/editor-js/image
• https://github.com/editor-js/code
• https://github.com/editor-js/link
• https://github.com/editor-js/list
• https://github.com/editor-js/inline-code
• https://github.com/editor-js/checklist
• https://github.com/editor-js/marker
• https://github.com/editor-js/embed
• https://github.com/editor-js/delimiter
• https://github.com/editor-js/table
• https://github.com/editor-js/raw

扩展

为了本节的演示，我们将使用 editor-js/warning 作为扩展性的示例。

扩展编辑器的步骤有两个。第一步是创建一个 JavaScript 文件并将其传递给 Nova。第二步是创建一个 blade 视图文件并将其传递给字段，以便您的块可以在 Nova 的 show 页面上渲染。

创建 JavaScript 文件

resources/js/editor-js-plugins/warning.js

/*
 * The editorConfig variable is used by you to add your tools,
 * or any additional configuration you might want to add to the editor.
 *
 * The fieldConfig variable is the VueJS field exposed to you. You may
 * fetch any value that is contained in your laravel config file from there.
 */
NovaEditorJS.booting(function (editorConfig, fieldConfig) {
    if (fieldConfig.toolSettings.warning.activated === true) {
        editorConfig.tools.warning = {
            class: require('@editorjs/warning'),
            shortcut: fieldConfig.toolSettings.warning.shortcut,
            config: {
                titlePlaceholder: fieldConfig.toolSettings.warning.titlePlaceholder,
                messagePlaceholder: fieldConfig.toolSettings.warning.messagePlaceholder,
            },
        }
    }
});

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/editor-js-plugins/warning.js', 'public/js/editor-js-plugins/warning.js');

app/Providers/NovaServiceProvider.php

// ...
public function boot()
{
    parent::boot();

    Nova::serving(function () {
        Nova::script('editor-js-warning', public_path('js/editor-js-plugins/warning.js'));
    });
}
// ...

config/nova-editor-js.php

return [
    // ...
    'toolSettings' => [
        'warning' => [
            'activated' => true,
            'titlePlaceholder' => 'Title',
            'messagePlaceholder' => 'Message',
            'shortcut' => 'CMD+SHIFT+L'
        ],
    ]
    // ...
];

创建 blade 视图文件

resources/views/editorjs/warning.blade.php

CSS 类从 这里 获得。

<div class="editor-js-block">
    <div class="cdx-warning">
        <h3 class="cdx-warning__title">{{ $title }}</h3>
        <p class="cdx-warning__message">{{ $message }}</p>
    </div>
</div>

app/Providers/NovaServiceProvider.php

use Advoor\NovaEditorJs\NovaEditorJs;

// ...
public function boot()
{
    parent::boot();

    NovaEditorJs::addRender('warning', function($block) {
        return view('editorjs.warning', $block['data'])->render();
    });
    
    // ...
}
// ...

这就是扩展 Nova EditorJS 包的全部内容！