README

A Laravel Nova 实现 Editor.js，由 @advoor 提供。

安装

通过 composer 安装

composer require advoor/nova-editor-js

发布配置文件

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

升级

如果是从 v0.4.0 升级，请重新发布配置文件！

用法

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

use Advoor\NovaEditorJs\NovaEditorJs;

如下使用字段

NovaEditorJs::make('FieldName');

然后，就这样！

您可以在配置文件中配置 Editor 应使用的工具以及其他一些设置，所以请确保查看：）

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

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

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

包含的工具

扩展

为了本节的目的，我们将使用 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 包的全部内容！

rmeira / nova-editor-js

维护者

详细信息

README

安装

升级

用法

包含的工具

扩展

创建 JavaScript 文件

创建 blade 视图文件