コンテンツにスキップ
KARTE Craft Developer Portal

リッチテキストエディタ

リッチテキストエディタは、リッチテキストフィールドで本文を入力するためのエディタです。見出しや装飾、リスト、画像の挿入などを使い、書式付きの本文を作成できます。

ブログ記事の本文やお知らせの説明文など、文章構造を持つコンテンツの入力に利用します。

取得できるデータ形式

リッチテキストフィールドの値は、APIで取得すると html、text、json の3つの形式で返ります。用途に応じて使い分けてください。

  • html: そのまま表示に利用できるHTML形式のデータです。フロントエンドでHTMLとして描画する用途に適しています。
  • text: 書式を除いたプレーンテキストです。抜粋の生成や検索などの用途に適しています。
  • json: 文書構造を保持した構造化データです。Management APIでコンテンツを作成、更新する際に、この形式で値を渡します。

フロントエンドで本文を表示する場合は、基本的に html を利用します。このページでは、各書式が html としてどのように出力されるかを示します。

段落と改行

本文入力中のEnterとShift + Enterで、段落の分割と改行を使い分けられます。

  • Enter: 新しい段落を作成します。直前の段落とは別の <p> 要素になります。
  • Shift + Enter: 同じ段落内で改行します。<p> は分割されず、<br> が挿入されます。

出力されるHTML

Enterで段落を分けると、別々の <p> になります。

<p>1つ目の段落</p>
<p>2つ目の段落</p>

Shift + Enterで改行すると、1つの <p> の中に <br /> が入ります。

<p>1行目<br />2行目</p>

利用できる書式

モデルのフィールド設定で、そのフィールドで利用できる書式を絞り込めます。コンテンツの用途に合わせて、必要な書式だけを使えるように設定できます。この絞り込みは、管理画面エディタのツールバーに表示するボタンを制御するものです。

リッチテキストエディタはマークダウン記法にも対応しています。マークダウンで書いたテキストを貼り付けると、対応する書式に変換されます。見出しや文字装飾、リストなど一部の書式は、入力中に記法を打つことでもその場で変換されます。マークダウン記法による入力は書式の絞り込みの対象外のため、ツールバーで無効にした書式でも、マークダウン記法を使えば入力できます。各書式のマークダウン記法は、以降の「マークダウン記法」に示します。マークダウン記法を持たない書式は「対応していません」と記載しています。

見出し

見出し1から見出し6まで指定できます。

管理画面での表示

見出し

マークダウン記法

行頭で # に続けてテキストを入力すると見出し1になります。# の数を増やすほど見出しのレベルが下がり、###### で見出し6になります。

出力されるHTML

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

テキストの配置

段落や見出しの配置（左寄せ、中央寄せ、右寄せなど）を指定できます。

管理画面での表示

テキストの配置

マークダウン記法

マークダウン記法には対応していません。

出力されるHTML

配置は要素の style 属性として出力されます。

<p style="text-align: left;">左寄せ</p>
<p style="text-align: center;">中央寄せ</p>
<p style="text-align: right;">右寄せ</p>

文字装飾

太字、斜体、下線、打ち消し線、ハイライト、下付き文字、上付き文字、インラインコードを指定できます。

管理画面での表示

文字装飾

マークダウン記法

  • 太字: **太字**
  • 斜体: *斜体*
  • 打ち消し線: ~~打ち消し線~~
  • ハイライト: ==ハイライト==
  • インラインコード: `インラインコード`
  • 下線、下付き文字、上付き文字: 対応していません

出力されるHTML

それぞれ次のタグで出力されます。これらの装飾は、段落（<p>）などのブロック要素の中に配置されます。

<strong>太字</strong>
<em>斜体</em>
<u>下線</u>
<s>打ち消し線</s>
<mark>ハイライト</mark>
<sub>下付き文字</sub>
<sup>上付き文字</sup>
<code>インラインコード</code>

引用

引用ブロックを指定できます。

管理画面での表示

引用

マークダウン記法

行頭で > に続けてテキストを入力すると引用になります。

出力されるHTML

<blockquote>
  <p>引用文</p>
</blockquote>

コードブロック

複数行のコードをコードブロックとして入力できます。

管理画面での表示

コードブロック

マークダウン記法

行頭でバッククォートを3つ入力するとコードブロックになります。続けて言語名を入力すると、その言語のシンタックスハイライトが管理画面のエディタに適用されます。

出力されるHTML

言語を指定しない場合は、code 要素にクラスは付与されません。

<pre><code>const a = 1;</code></pre>

言語を指定すると、code 要素に language-言語名 のクラスが付与されます。シンタックスハイライト自体は出力HTMLには含まれないため、表示に反映するにはフロントエンド側でこのクラスをもとにハイライトを適用します。

<pre><code class="language-typescript">const a = 1;</code></pre>

リスト

番号付きリストと箇条書きリストを指定できます。

管理画面での表示

リスト

マークダウン記法

  • 箇条書きリスト: 行頭で - （または *、+）に続けてテキストを入力します
  • 番号付きリスト: 行頭で 1. に続けてテキストを入力します

出力されるHTML

<ol>
  <li><p>111</p></li>
  <li><p>222</p></li>
</ol>
<ul>
  <li><p>aaa</p></li>
  <li><p>bbb</p></li>
</ul>

リンク

選択した文字列にリンクを設定できます。「別タブで開く」を有効にした場合、target="_blank" 属性が付与されます。有効にしない場合、target="_self" 属性が付与されます。

管理画面での表示

リンク

マークダウン記法

[リンク](https://リンクのURL) の形式で記述します。リンクは、マークダウンで書いたテキストを貼り付けたときに変換されます（入力中の自動変換は行われません）。

出力されるHTML

<a target="_blank" rel="noopener noreferrer nofollow" href="https://リンクのURL">リンク</a>

画像

メディアライブラリの画像を本文に挿入できます。

管理画面での表示

画像

マークダウン記法

![image](アセットID) の形式で記述すると、画像を挿入できます。![image] の部分は固定で、丸括弧にはメディアライブラリのアセットID（画像のURLではありません）を指定します。代替テキストはアセットに設定された値が使われるため、ここでは指定しません。

出力されるHTML

画像は、アセットのIDを保持する data-asset-id 属性付きの img タグとして出力されます。

<img
  data-asset-id="xxxxxxxx"
  src="https://xxxxxxxx.assets.cross-cms.com/..."
  alt="画像の代替テキスト"
  width="999"
  height="999"
/>

区切り線

水平の区切り線を挿入できます。

管理画面での表示

区切り線

マークダウン記法

行頭で --- を入力すると区切り線になります。

出力されるHTML

<hr />

テーブル

表を挿入できます。

管理画面での表示

テーブル

マークダウン記法

| 列1 | 列2 | のようにセルを | で区切り、見出し行の下に区切り行（| --- | --- |）を置いて記述します。テーブルは、マークダウンで書いたテキストを貼り付けたときに変換されます（入力中の自動変換は行われません）。

出力されるHTML

<table style="min-width: 50px;">
  <colgroup>
    <col style="min-width: 25px;" />
    <col style="min-width: 25px;" />
  </colgroup>
  <tbody>
    <tr>
      <th colspan="1" rowspan="1"><p>列1</p></th>
      <th colspan="1" rowspan="1"><p>列2</p></th>
    </tr>
    <tr>
      <td colspan="1" rowspan="1"><p>aaa</p></td>
      <td colspan="1" rowspan="1"><p>bbb</p></td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1"><p>xxx</p></td>
      <td colspan="1" rowspan="1"><p>yyy</p></td>
    </tr>
  </tbody>
</table>

各セルには colspan と rowspan が常に出力され、結合していない場合は 1 になります。col の min-width は1列あたり25pxで、table の min-width は列数に応じて変わります。

埋め込み

URLを指定して、外部コンテンツを本文に挿入できます。動画やSNSの投稿のほか、一般的なWebページもカード形式で表示できます。

管理画面での表示

埋め込み

マークダウン記法

マークダウン記法には対応していません。

出力されるHTML

埋め込みは data-type="embed" を持つ div として出力され、その中に埋め込み先のHTML（iframeなど）が含まれます。

<div data-type="embed">
  <div
    style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 52.5%; padding-top: 120px;"
  >
    <iframe
      src="https://iframely.net/api/iframe?app=1&amp;url=https%3A%2F%2Fecosystem.plaid.co.jp%2Fproduct%2Fkarte-craft%2Fxcms&amp;key=xxxxxxxx"
      style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;"
      allowfullscreen=""
    ></iframe>
  </div>
</div>

上記は https://ecosystem.plaid.co.jp/product/karte-craft/xcms を埋め込んだ場合の例です。div の中に入るHTML（iframeの内容やサイズなど）は、埋め込み先のサービスやURLによって異なります。

またフィールドの設定で、埋め込みコンテンツを遅延読み込みにするかどうかを指定できます。

カスタムクラス

本文中の要素に、あらかじめ登録したクラス（HTMLのclass属性）を付与できます。フロントエンド側のスタイルと対応づけて、表示を制御するために使います。 フィールドの設定でクラスの選択肢を登録しておくと、入力時にその中から選んで要素に適用できます。各選択肢は、管理画面に表示するラベルと、実際に付与するクラス名の組み合わせで定義します。

管理画面での表示

カスタムクラス

マークダウン記法

マークダウン記法には対応していません。

出力されるHTML

付与したクラス名は、出力されるHTMLにも反映されます。

<span data-custom-class="true" class="登録したクラス名">カスタムクラス</span>