Docs
ダッシュボードへ移動

richtext

WYSIWYGエディタで編集可能なリッチテキストフィールドです。ブログ記事の本文など、書式設定が必要なコンテンツに適しています。

基本例 

{
  "name": "content",
  "type": "richtext",
  "label": "本文"
}

プロパティ

プロパティ型必須説明
namestringYesフィールドの識別子
type"richtext"Yes"richtext"を指定
labelstringNoCMS上での表示名
notestringNo編集者向けの補足メモ
requiredbooleanNo必須フィールドかどうか
disabledFeaturesstring[]No無効化するエディタ機能

使用例

記事本文 

{
  "name": "content",
  "type": "richtext",
  "label": "本文",
  "required": true
}

機能制限付き 

{
  "name": "summary",
  "type": "richtext",
  "label": "要約",
  "disabledFeatures": ["heading", "image", "codeBlock"]
}

無効化可能な機能

disabledFeatures配列に指定することで、エディタの機能を無効化できます。

見出し

値説明
headingすべての見出し
heading1見出し1（H1）
heading2見出し2（H2）
heading3見出し3（H3）
heading4見出し4（H4）
heading5見出し5（H5）

ブロック要素

値説明
bulletList箇条書きリスト
orderedList番号付きリスト
taskListタスクリスト
blockquote引用
codeBlockコードブロック
horizontalRule水平線
image画像

インライン要素

値説明
bold太字
italic斜体
underline下線
strike取り消し線
codeインラインコード
highlightハイライト
linkリンク

設定例

シンプルなテキストエディタ

見出しや画像を使わせたくない場合：

{
  "name": "summary",
  "type": "richtext",
  "label": "要約",
  "disabledFeatures": [
    "heading",
    "taskList",
    "codeBlock",
    "image",
    "horizontalRule"
  ]
}

基本的な書式のみ

太字、斜体、リンクのみ許可する場合：

{
  "name": "note",
  "type": "richtext",
  "label": "備考",
  "disabledFeatures": [
    "heading",
    "bulletList",
    "orderedList",
    "taskList",
    "blockquote",
    "codeBlock",
    "horizontalRule",
    "image",
    "underline",
    "strike",
    "code",
    "highlight"
  ]
}

コードブロック禁止

技術的でないコンテンツの場合：

{
  "name": "content",
  "type": "richtext",
  "label": "本文",
  "disabledFeatures": ["codeBlock", "code"]
}

pico.bodyとの関係

pico.bodyで指定されたrichtextフィールドは、マークダウンファイルの本文部分に格納されます。

{
  "fields": [
    { "name": "title", "type": "string", "label": "タイトル" },
    { "name": "content", "type": "richtext", "label": "本文" }
  ],
  "pico": {
    "title": "title",
    "body": "content"  // contentフィールドは本文として保存
  }
}

出力例（マークダウンファイル）:

---
title: "記事タイトル"
---

本文の内容がここに入ります。

pico.bodyを指定しない場合、richtextフィールドはフロントマッターにHTML文字列として格納されます。

JSON形式での保存

extension: "json"のコレクションでは、richtextフィールドはHTML文字列として保存されます。

{
  "title": "製品名",
  "description": "<p>製品の<strong>詳細な</strong>説明文です。</p>"
}
Docs