[Keystone] ドキュメントフィールドのデモ
ドキュメントフィールドのデモ
「ドキュメントフィールドタイプ」とは、コンテンツ作成者がシステム内のコンテンツを素早く簡単に編集できる高度にカスタマイズ可能なリッチテキストエディタです。
異なる設定を試して、エディタの使用感にどのような影響を与えるかを確認できます。
Keystone アプリケーションでドキュメントフィールドを設定およびレンダリングする方法の詳細については、「ドキュメントフィールドガイド」を参照してください。
デモを構成する
「ドキュメントフィールド」は高度に設定可能です。以下のフォームを使用すると、デモエディタで有効になる機能を制御できます。変更は、エディタのツールバーとフィールド構成自体の両方で確認できます。
フィールド構成
これは、エディタで使用される構成です。デモを構成するためにオプションを選択すると、これが更新されます。
import { config, list } from '@keystone-6/core';
import { document } from '@keystone-6/fields-document';
export default config({
lists: {
ListName: list({
fields: {
fieldName: document({
formatting: true,
links: true,
layouts: [
[1, 1],
[1, 1, 1],
[2, 1],
[1, 2],
[1, 2, 1]
],
dividers: true
}
/* ... */
}),
/* ... */
},
}),
/* ... */
},
/* ... */
});
ドキュメント構造
ドキュメントフィールドのデータは、データベース内にJSON文字列として格納されます。
[
{
"type": "heading",
"children": [
{
"text": "This is the document editor."
}
],
"level": 1
},
{
"type": "paragraph",
"children": [
{
"text": "Here’s just a few things you can do with it:"
}
]
},
{
"type": "layout",
"layout": [
1,
1
],
"children": [
{
"type": "layout-area",
"children": [
{
"type": "paragraph",
"children": [
{
"text": "Add layout blocks"
}
]
},
{
"type": "paragraph",
"children": [
{
"text": "and all the usual "
},
{
"text": "formatting",
"code": true
},
{
"text": " options"
}
]
}
]
},
{
"type": "layout-area",
"children": [
{
"type": "paragraph",
"children": [
{
"text": "You can insert "
},
{
"type": "link",
"href": "https://keystonejs.com/",
"children": [
{
"text": "links"
}
]
},
{
"text": ""
}
]
},
{
"type": "paragraph",
"children": [
{
"text": "and format text with **"
},
{
"text": "markdown syntax",
"bold": true
},
{
"text": "**"
}
]
}
]
}
]
},
{
"type": "component-block",
"component": "quote",
"props": {
"content": null,
"attribution": null
},
"children": [
{
"type": "component-block-prop",
"propPath": [
"content"
],
"children": [
{
"type": "paragraph",
"children": [
{
"text": "We’re really excited to show you what we’ve built, and what you can build with it!"
}
]
}
]
},
{
"type": "component-inline-prop",
"propPath": [
"attribution"
],
"children": [
{
"text": "The KeystoneJS Team"
}
]
}
]
},
{
"type": "component-block",
"component": "notice",
"props": {
"intent": "info",
"content": null
},
"children": [
{
"type": "component-block-prop",
"propPath": [
"content"
],
"children": [
{
"type": "paragraph",
"children": [
{
"text": "The really cool stuff is behind the "
},
{
"text": "+",
"code": true,
"bold": true
},
{
"text": " button on the right of the toolbar – these are the "
},
{
"text": "Custom Components",
"bold": true
},
{
"text": "."
}
]
},
{
"type": "paragraph",
"children": [
{
"text": "This component is the "
},
{
"text": "Notice",
"bold": true
},
{
"text": ", but you can build your own by defining their data schema (like you do your Keystone schema) and providing a React Component to render the preview."
}
]
},
{
"type": "paragraph",
"children": [
{
"text": "They store structured data, and can be inserted (and edited!) anywhere in the document. You can even link them to other items in your database with the "
},
{
"text": "Relationship",
"bold": true
},
{
"text": " field type."
}
]
}
]
}
]
},
{
"type": "component-block",
"component": "notice",
"props": {
"intent": "success",
"content": null
},
"children": [
{
"type": "component-block-prop",
"propPath": [
"content"
],
"children": [
{
"type": "paragraph",
"children": [
{
"text": "Custom components can also have props that are edited with an inline form, for more complex use cases (including conditional fields)"
}
]
},
{
"type": "paragraph",
"children": [
{
"text": "Try inserting a "
},
{
"text": "Hero",
"bold": true
},
{
"text": " component and you'll see how it works. Remember, you can build your own, so your content authors can insert components from your website's Design System, and your front-end still gets structured data to render!"
}
]
}
]
}
]
},
{
"type": "component-block",
"component": "carousel",
"props": {
"items": [
{
"title": "This is a carousel",
"image": "https://images.unsplash.com/photo-1618172193763-c511deb635ca"
},
{
"title": "It’s built with component block array fields",
"image": "https://images.unsplash.com/photo-1633412802994-5c058f151b66"
},
{
"title": "Click edit to reorder it via drag and drop",
"image": "https://images.unsplash.com/photo-1635377090186-036bca445c6b"
}
]
},
"children": [
{
"type": "component-inline-prop",
"children": [
{
"text": ""
}
]
}
]
},
{
"type": "paragraph",
"children": [
{
"text": "This is the end of the editable document. Expand the blocks below to see how the editor has been configured and how the data is stored ↓",
"bold": true
}
]
}
]