リッチエディタで改行をbrタグに設定してるが、右寄せ等を設定した場合に、pタグで出力される

こちらは旧リッチエディタに関する記載となります。

2023年5月31日にリリースされた新しいリッチエディタについては、改行と段落、およびテキスト寄せの仕様が異なりますので、詳しくは公式ドキュメントの「リッチエディタの操作方法」をご覧ください。

不具合の詳細

リッチエディタの「改行に<br>タグを用いる」設定をONにしていると、GET APIでコンテンツを取得した際に改行部分は<br>になります。

richeditor-multi-paragraph-setting-01

不具合の内容は、この設定が済んだ状態でリッチエディタ内で「左寄せ」「中央寄せ」「右寄せ」を指定すると改行部分に<p>タグが用いられることです。

具体的な例をあげます。まず、上記の設定をONにした状態で以下のようにリッチエディタに入稿を行いました。

richeditor-text-align-test

この状態でGET APIから取得できるHTMLは以下のような形となり、中央寄せ部分では改行部分に<p>タグが使用されてしまいます。

<p>通常の<br>改行</p>
<p style=\"text-align:center\">中央寄せで</p><p style=\"text-align:center\">改行</p>

ご対応内容

この状態を避けていただく手立て(ワークアラウンド)として大きく3つの方法をご提示します。

テキストの「左寄せ」「中央寄せ」「右寄せ」を使わないこと

まず最初に、リッチエディタ内のこれらの機能を使わない方法があげられます。リッチエディタのボタンは上記画像内の「装飾ボタン」メニューにて表示状態をコントロールできるためこちらでこちらで非表示としていただくことがおすすめです。

また、コンテンツを複雑な形で表示するには繰り返しフィールドの利用も検討してください。

https://blog.microcms.io/update-repeater-field/

改行を<p>タグにして他の部分と差が出ないようにすること

設定にて改行を<br>にできますが、特に大きな理由がない場合などは改行を<p>タグに統一してください。

個別にスタイルの指定を行う

表示崩れが主な問題となる場合は「左寄せ」「中央寄せ」「右寄せ」に関してのスタイルを個別で修正を行ってください。コード例は下記の通りです。

<style>
p[style="text-align:right"] + p[style="text-align:right"]{
// 既存のpタグへのスタイルを打ち消す
}
</style>

不具合の原因と対策目処について

こちらの現象は内部的に使用しているHTML生成モジュールの不具合によって引き起こされています。修正完了時期については確定しておりません。