README

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

安装

通过 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 指南，了解如何注册自定义组件的说明。