Zenn
😺

Payloadのリッチテキストエディターの設定方法

に公開
Payload
tech

はじめに

Payloadのリッチテキストエディターは、テキストエディターフレームワークのLexicalをベースに作られており、Notionライクなブロックエディターです。

リッチテキストエディターのUI

この記事では、Payloadのリッチテキストエディターの設定方法について紹介したいと思います。

サイト全体の共通設定

まずは、サイト内のすべてのリッチテキストエディターに適用される設定の設定方法について解説します。

src/payload.config.tsのbuildConfigのトップレベルeditorキーに設定を記述すると、サイト内のすべてのリッチテキストエディターに適用されます。下記が設定の例です。

src/payload.config.ts
import {
  lexicalEditor,
  HeadingFeature,
  ParagraphFeature,
  BoldFeature,
  UnderlineFeature,
  UnorderedListFeature,
  OrderedListFeature,
  HorizontalRuleFeature,
  FixedToolbarFeature,
} from '@payloadcms/richtext-lexical'

// ...
export default buildConfig({
  // ...
  editor: lexicalEditor({
    features: [
      HeadingFeature({ enabledHeadingSizes: ['h2', 'h3', 'h4', 'h5'] }),
      ParagraphFeature(),
      BoldFeature(),
      UnderlineFeature(),
      UnorderedListFeature(),
      OrderedListFeature(),
      HorizontalRuleFeature(),
      FixedToolbarFeature(),
    ],
  })
  // ...
})

各設定項目について解説します。

  • HeadingFeature
    • 見出しの機能
    • h2 ~ h5のみ使用できるよう制限している
  • ParagraphFeature
    • pタグに相当するテキストの機能
  • BoldFeature
    • テキストを太文字にする機能
  • UnderlineFeature
    • テキストに下線をつける機能
  • UnorderedListFeature
    • 順序なしリストの機能
  • OrderedListFeature
    • 順序付きリストの機能
  • HorizontalRuleFeature
    • 水平線を追加する機能
  • FixedToolbarFeature
    • リッチテキストエディタ上部のツールバーの機能

これらの設定により、リッチテキストエディターの見た目は下記キャプチャのようになります。

サイト全体の共通設定が適用されたリッチテキストエディターのUI

ここで紹介した機能以外にも多くの機能があります。機能の全量は公式ドキュメントをご参照ください。

https://payloadcms.com/docs/rich-text/overview

特定のフィールドの個別設定

次に、特定のフィールドにのみ適用される設定の設定方法についても解説したいと思います。

特定のフィールドに適用するには、コレクションのフィールド設定に記述します。下記が設定の例です。

src/collections/[Collection Name]/index.ts
import { lexicalEditor, BlockquoteFeature } from '@payloadcms/richtext-lexical'
  // ...
  fields: [
    // ...
    {
      name: 'body',
      label: {
        en: 'Body',
        ja: '本文',
      },
      type: 'richText',
      localized: true,
      editor: lexicalEditor({
        features: ({ rootFeatures }) => {
          return [...rootFeatures, BlockquoteFeature()]
        },
      }),
    },
    // ...

上記の設定では、サイト全体の共通設定に加え引用ブロックの機能も使用できるよう設定しています。rootFeaturesがサイト全体の共通設定の部分で、BlockquoteFeatureが引用ブロックの機能です。

この設定により、リッチテキストエディターの見た目は下記キャプチャのようになります。サイト全体の設定で指定した機能の他に「Blockquote」のメニューが追加されていることを確認できます。

特定のフィールドの個別設定が適用されたリッチテキストエディターのUI

まとめ

この記事では、Payloadのリッチテキストエディターの設定方法について紹介しました。リッチテキストエディターの各種機能が細かく分かれており、機能ごとに有効/無効を設定できることを理解していただけたならば幸いです。

参考

https://payloadcms.com/docs/rich-text/overview

Discussion