microCMS のメモとサンプル

microCMS 上で実際に RichEditor で入力し HTML として取得したときのサンプルと編集についてのメモ。

microCMS の RichEditor 編集画面

HTML 出力のサンプル

基本的には RichEditor の機能のみ利用しているが、以下の点では今回の環境に依存した表示となる。

  • スタイルは Docs Theme のものが適用される(Heading が 5 以降で Normal Text と同じスタイルになるのはこのため)
  • RichEditor の設定を変更している
    • 改行に<br>タグを用いるをオフ
    • 画像のレスポンスにwidthとheightを含むをオン

見出し

heading4

heading5
heading6

文字の装飾

大きさ

文字を最大にする。

文字を大きくする。

文字を小さくする。

ボールド

文字をボールドにする。

イタリック

文字をイタリックにする。

下線

文字に下線を付ける。

打ち消し線

文字に打消し線を付ける。

コード

文字をコードにする。

背景色

文字の背景色を変更する。

文字の色を変更する。

下付き文字

H2O

上付き文字

e=mc2

改行

以下 Shift + Enter で改行。

改行 1

改行 2

ここまで。

以下改行を連続。



ここまで。

連続した空白

ここから空白の連続 ここまで。

リンク

サイトへリンクを設定する。

リスト

o-list

  1. 項目 - A
  2. 項目 - B
    1. 項目 - B_A
    2. 項目 - B_B
  3. 項目 - C

list

  • 項目 - A
  • 項目 - B
    • 項目 - B_A
    • 項目 - B_B
  • 項目 - C

インデント

インデントを指定する。

インデントを指定する。

インデントを指定する。

コードブロック

const a = 10
console.log(a)

画像

埋め込み

引用

引用されたテキスト 1。
引用されたテキスト 2。

編集機能

主にコンテンツを編集するための機能について。なお、以下は内容は RichEditor の出力を HTML として取得した場合で、オブジェクト(現在ベータ版)として取得した場合は挙動が異なる(例. オブジェクトでは見出しにランダムな ID は設定されていない)。

API レスポンスでの形式

RichEditor の出力は HTML またはオブジェクト(現在ベータ版)としてレスポンスに含まれる。

オブジェクトの形式と変換ライブラリーの有無は現時点では不明。

日本語入力

PC(試したのは Windows) での日本語の入力は通常通り行える。ただし、コードブロック直後での漢字変換(プリエディット)がコードブロックを上書きしてしまうなど、若干の不安定さはある。

モバイル対応

レスポンシブ対応されている。日本語の入力も通常通り行える(試したソフトキーボードは S-Shoin だけなので他のキーボードでは違う結果になる可能性もある)。ただし、RichEditor では装飾アイコンの領域があるので、ディスプレイが小さいデバイスだと編集領域が数行程度となる。

キーボードショートカット

CTRL+ s で下書き保存をできる。その他の操作(文字の装飾を指定など)は不明だが、マークダウン記法を使えるため見出しなどの指定はキーボード入力から行える。

コピー & ペースト

RichEditor 内ではテキストとともに画像や書式もコピー&ペーストできる。装飾されている文字をペーストすると指定されていないはずの背景色を付加されていることがある。

外部のソースからのペーストもできるが、対応していない書式は無視される。画像はドキュメントの一部としては無視されるが、エクスプローラー等からファイルとしてをペーストした場合はアップロードされる(ブラウザーなどで画像としてコピーされたものは無視される)。

No-Break Space 文字(U+00A0)はそのままペーストされてしまうので、通常の空白と見分けがつかなくなる。

また、書式なしでペースト(Windows では ctrl + shift + v でペースト)した文字列の中に連続した空白があるとこれも No-Break Space へ置き換わる。

なお、microCMS では他ソースから RichEditor へのペーストは非推奨となっている。

改行

改行の入力は API スキーマの設定で挙動が変更される(HTML 出力の場合)。

デフォルトでは <br> となるが、設定の変更でパラグラフの区切りにもできる。今回はパラグラフの区切りとする設定でコンテンツを作成している。

以下の場合は設定とは異なる挙動となる。

  • コードブロックの中では改行
  • 引用の中では <br>
  • 空行は常に <br> (パラグラフの区切りとしている場合は<p> で囲まれる)

Shift + Enter で改行しても挙動は変更されない。

連続した空白

空白を連続して入力した場合、単純に空白の連続となる。

& のエスケープ

「&gt;」など一部の文字実態参照として成立する文字列の場合、編集フィールド上に&gt; と入力すると & がエスケープされない(ここでは全角で&を入力して回避している)。サポートに確認してみたがこれは仕様とのこと。

見出し

heading タグにはランダムな文字列が id 属性として自動的に設定される(目次作成用)。

リンク

通常の Web(URL)のみ設定可能。メディアライブラリのファイルには設定できない(microCMS では API を通さないでメディアファイルの URL を扱うことは非推奨とされている)。

リンク元の文字列に画像を含めても画像にリンクは設定されない(後述の画像設定パネルで個別に指定は可能)。

画像

バックエンドには imgix が利用されている。

アップロードは以下の方法が使える(アップロード元はローカルファイルのみ)。

  • メディアライブラリー の UI
  • RichEditor へファイルをドロップ
  • RichEditor へクリップボード経由で画像ファイルをペースト
  • RichEditor のリボン(メディアライブラリのダイアログが表示される)

再アップロード(メディアライブラリー内のファイル入れ替え)後は、RichEditor に埋め込まれた画像も入れ替わる。

RichEditor へ埋め込まれた画像は HTML 出力時には img タグとして扱える。

文字列とは同じパラグラフになる。

Alt は RichEditor の画像設定パネルから指定する。

画像設定パネルから画像のサイズを変更可能。

  • サイズ変更は imgix で行われるので元ファイルはそのまま残る
  • width と height の比率は固定
  • ズーム等で自由な位置を切り出すことはできない

画像設定パネルからはリンクも設定できる。

画像のサイズは width height 属性に設定される(API スキーマの設定を変更する必要がある)。

メディアライブラリ の UI 上から、画像を参照しているドキュメントを確認できる(現状は API からはできない)。

画像にステージング(下書き or 公開)は適用されない。公開として扱われる。

埋め込み

YouTube などの外部サービスを埋め込むことができる。

フルスクリーン

RichEditor の編集フィールドのみをブラウザ内に表示することは厳密にはできないが、表示領域を広げることはできる(サイトバーや一部のボタンが隠れない、チャットアイコンが重なっている状態)。

このページをGitHubで編集する 更新日 Tue, Dec 28, 2021