microCMS

リッチエディタの操作方法

最終更新日: 2020/05/15

コンテンツを入力するフィールドのひとつとしてリッチエディタがあります。
ここではリッチエディタの操作方法を解説します。

見出し、段落

h1h5pタグに対応しています。
h1h5にはテキストをハッシュ化した文字列がidとして割り振られます。(つまり、テキストを変更しない限りidは固定となります)

割り振られたidを用いて、フロントエンド側で目次を生成することが可能です。
詳細については下記の記事をご覧ください。

microCMSで目次を作成する
https://microcms.io/blog/create-table-of-contents

文字サイズ

小 / 標準 / 大 / 最大 から選択可能です。
それぞれ、font-sizeが 0.75em / 1em / 1.5em / 2.5em に相当します。

太字

テキストがstrongタグで囲われます。

イタリック

テキストがemタグで囲われます。

アンダーライン

テキストがuタグで囲われます。

打ち消し線

テキストがsタグで囲われます。

背景色

テキストに背景色をつけます。

文字色

テキストに文字色をつけます。

テキスト寄せ

左寄せ / 中央寄せ / 右寄せ / 均等割付 の指定ができます。

引用

テキストがblockquoteタグで囲われます。

コード

テキストがpreタグとcodeタグで囲われます。
ソースコードの入力に適しています。
シンタックスハイライトの実装を行い場合は下記の記事をご参考ください。

サーバサイドでシンタックスハイライトを行う
https://microcms.io/blog/syntax-highlighting-on-server-side

番号付き箇条書き

テキストがolタグ、liタグで囲われます。

箇条書き

テキストがulタグ、liタグで囲われます。

リンク

リンクを指定することができます。
https://またはhttp://始まりの場合は外部リンクとなり、/hogeなどのパス入力の場合は内部リンクとなります。

画像

画像のアップロード、選択ができます。
画像のアップロードはメディア画面から行うことも可能です。
リッチエディタ内に入力された画像をクリックすることで、画像の width / height / alt とリンク先を指定することができます。

外部サービス埋め込み

外部サービスのURLを入力することで埋め込みをすることができます。
現在、対応しているサービスは以下になります。

  • YouTube
  • Vimeo
  • Twitter
  • Instagram
  • Facebook
  • Speaker Deck
  • SlideShare