README

已废弃！

警告

我不得不放弃这个项目，因为我已经有一年多没有使用Nova了。任何想要分支此存储库并接管（超过500,000次安装，每天仍有超过500次安装）的人，请随时这样做。 在讨论或问题中给我留言，如果你有替代方案，我将在packagist和这里添加替代链接。

Laravel Nova Tiptap Editor Field

由 tiptap editor for Vue.js 的 @ueberdosis 实现的 Laravel Nova。

安装

通过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 时，你会得到一个按钮，用于切换所有选定块元素的 RTL 模式（dir="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 编辑器并手动编辑 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)。请参阅 许可证文件 了解更多信息。