README

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

安装

通过 Composer 安装

composer require advoor/nova-editor-js

发布配置文件

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

版本兼容性

Laravel Nova 4.x 与 3.x 不兼容，因此我们不得不进行版本分裂。请使用以下表格查找适合您安装的版本。

请注意，我们确实提高了 PHP 版本。如果您继续使用 Laravel 和 Nova 的新版本，我们期望您的 PHP 版本与此行为相匹配。

升级

请参阅升级指南。

使用方法

要将 EditorJS 添加到您的应用程序，您需要修改您的 Nova 资源。为了便于使用，我们还建议更新您的模型，但这不是必需的。

更新您的 Nova 资源

此包暴露了一个 NovaEditorJsField，负责显示 HTML 内容并向用户提供 EditorJs 字段。

要使用它，只需导入字段，

use Advoor\NovaEditorJs\NovaEditorJsField;

在字段数组中使用它，

return [
    // …
    NovaEditorJsField::make('about'),
];

然后，您就拥有了一个精美的编辑器。

更新您的模型（可选）

为了便于使用，我们建议您将 NovaEditorJsCast 添加到您的模型的 $casts 上。这将把值映射到 NovaEditorJsData 模型，该模型可以通过 Blade（渲染 HTML）或通过 API 调用（渲染 JSON，除非您调用 toHtml 或将其转换为字符串）返回。

use Advoor\NovaEditorJs\NovaEditorJsCast;

class User extends Model {
    protected $casts = [
        'about' => NovaEditorJsCast::class,
    ];
}

由于 NovaEditorJsData 模型是 Htmlable，Blade 会将其识别为安全的 HTML。这意味着您不必使用 Blade "未转义语句"。

<article>
    <h1>About {{ $user->name }}</h1>
    {{ $user->about }}
</article>

不更改模型渲染 HTML

您还可以使用 NovaEditorJs 门面从存储的数据渲染 HTML。

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

generateHtmlOutput 的返回值是一个 HtmlString，它被 Blade 视为安全的。这意味着您不必使用 Blade "未转义语句"。

<article>
    <h1>About {{ $user->name }}</h1>
    {{ NovaEditorJs::generateHtmlOutput($user->about) }}
</article>

自定义

您可以通过更新配置文件中的 editorSettings 和 toolSettings 属性来配置编辑器设置以及编辑器应使用的工具。

从配置中，您可以定义以下编辑器设置

• placeholder（《文档》）- 在空编辑器中显示的占位符
• defaultBlock（《文档》）- 默认使用的块
• autofocus（《文档》）- 如果编辑器应自动聚焦，仅在没有在页面上有多个编辑器且考虑了 可访问性影响 的情况下使用
• rtl（《文档》）- 设置为 true 以启用从右到左模式，适用于阿拉伯语和希伯来语等语言

此外，您可以自定义编辑器应使用的工具。以下工具默认启用

• 标题
• 图片
• 链接
• 列表
• 代码块
• 内联代码
• 清单
• 标记
• 嵌入^†
• 分隔符
• 表格
• 原始

您可以通过更改位于 resources/views/vendor/nova-editor-js/ 下的视图来自定义每个组件的视图。

^† 嵌入 工具通过粘贴可嵌入内容的URL触发。它没有在“添加”菜单中列出。

注册自定义组件

请参阅有关如何注册自定义组件的指南 扩展 Nova EditorJS。