README

Laravel Nova Tiptap 编辑器字段

这是一个 Laravel Nova 的 Vue.js tiptap 编辑器的实现，由 @ueberdosis 开发。

安装

通过 composer 安装

对于 Nova 4，使用这个命令（它安装 nova-tiptap 的第 3 版本）

composer require manogi/nova-tiptap

对于 Nova 3，使用这个命令（它安装 nova-tiptap 的第 2 版本）

composer require manogi/nova-tiptap "^2.8"

使用默认设置

Tiptap::make('FieldName')

这将只提供加粗和斜体按钮。

您还需要将此 use 语句添加到文件顶部

use Manogi\Tiptap\Tiptap;

使用您选择的按钮

Tiptap::make('FieldName')
  ->buttons([
        'heading',
        '|',
        'italic',
        'bold',
        '|',
        'link',
        'code',
        'strike',
        'underline',
        'highlight',
        '|',
        'bulletList',
        'orderedList',
        'br',
        'codeBlock',
        'blockquote',
        '|',
        'horizontalRule',
        'hardBreak',
        '|',
        'table',
        '|',
        'image',
        '|',
        'textAlign',
        '|',
        'rtl',
        '|',
        'history',
        '|',
        'editHtml',
    ])
    ->headingLevels([2, 3, 4]),

| 和 br

您可以使用 | 来定义两个按钮之间的垂直线，您可以使用 br 来定义按钮后的硬回车。

标题和 headingLevels

当只传递字符串 'heading' 时，您可以选择 H1、H2 和 H3。您可以通过使用例如 headingLevels([2, 3, 4]) 来设置标题级别，这将给您 H2 到 H4。

链接和 linkSettings 以及 fileSettings

当只传递字符串 'link' 时，您可以将文本与 URL 链接，并定义链接是否在新窗口中打开。您还可以将文本与您上传到服务器的文件链接。您可以选择使用 linkSettings 来定义此文件上传是否可行/可见

Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'link',
  ])
  ->linkSettings([
      'withFileUpload' => false,
  ]),

并且您可以可选地使用 fileSettings 来定义 磁盘 和 路径

Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'link',
  ])
  ->fileSettings([
      'disk' => 'your_custom_disk',
      'path' => 'your/custom/path',
  ]),

如果此处未定义磁盘，则假设为 public，如果您的 config/filesystems.php 中定义了 public 磁盘，否则它假设为 config('filesystems.default')。

并且如果此处未定义路径，它假设为该磁盘的根目录。

图片和 imageSettings

使用 'image' 按钮，您可以允许用户通过文件上传或添加 URL 来添加图片。您还可以可选地使用 imageSettings 来定义 磁盘 和 路径

Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'image',
  ])
  ->imageSettings([
      'disk' => 'your_custom_disk',
      'path' => 'your/custom/path',
  ]),

如果此处未定义磁盘，则假设为 public，如果您的 config/filesystems.php 中定义了 public 磁盘，否则它假设为 config('filesystems.default')。

并且如果此处未定义路径，它假设为该磁盘的根目录。

禁止图片上传

对于图片，您也可以使用 withFileUpload 属性完全禁止文件上传

Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'image',
  ])
  ->imageSettings([
      'withFileUpload' => false,
  ]),

文本对齐 textAlign

当添加 textAlign 时，您将获得四个按钮用于对齐文本：左对齐、右对齐、居中对齐和两端对齐。默认对齐方式为左对齐。

Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'textAlign',
  ]),

如果您想更改其中的一些，您可以使用 alignments 和 defaultAlignment 方法

Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'textAlign',
  ])
  ->alignments(['right', 'left'])
  ->defaultAlignment('right'),

使用 rtl 支持RTL

当添加 rtl 时，您将获得一个按钮，用于切换所有选定的块元素（dir="rtl"）的 RTL 模式。

Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'rtl',
  ]),

两个不同的 "code" 按钮

'code' 是行内代码（如 <code></code>），而 'codeBlock' 将给您 <pre><code></code></pre>。

使用 codeBlock 时的语法高亮

Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'code',
      'codeBlock'
  ])
  ->syntaxHighlighting(),

当使用 'codeBlock' 时，您可以通过使用 syntaxHighlighting() 来打开语法高亮。

编辑 HTML

'editHtml' 选项将启用将 tiptap 编辑器切换到 textarea 并手动编辑 HTML 的功能

使用 editHtml 时的 HTML 主题

Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'code',
      'editHtml'
  ])
  ->htmlTheme('night'),

当使用 'editHtml' 时，您可以使用 htmlTheme() 来设置主题。默认使用的主题是 "material"。您可以在 这里 找到所有使用的 codemirror 主题。

保存 JSON

您可以选择使用 saveAsJson 来启用将 tiptap 编辑器内容以 JSON 格式保存到字段的选项

Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'code'
  ])
  ->saveAsJson(),

索引视图中的可见性

与 Textarea 和 Trix 字段一样，此字段在索引视图中被隐藏。您可以通过使用 计算字段 来使内容可见。

屏幕截图

带有所有按钮的 tiptap 编辑器

想法是编辑器可以与 Nova 的其余部分一起进行主题化 - 这里只是通过使用 Laravel Nova Stripe Theme 就有了不同的外观

许可

MIT 许可证 (MIT)。请参阅 许可文件 以获取更多信息。