Craft CMS のリッチテキストエディタ Redactor 内の画像でポジションを設定できるようにする

Craft CMS のリッチテキストエディタ Redactor 用のフィールドに Standard.js を適用している場合は、リッチテキストエディタで画像を利用することができます。

しかし、初期設定のままでは画像の配置を設定することができません。そこで、画像の配置を設定できるようにする方法をご紹介します。

なお、Redactor の設定用の JSON ファイルは config/redactor ディレクトリの中にあります。Redactor プラグインをインストールした時点では、Simple.js と Standard.js が入っています。

今回はこの Standard.js の方をカスタマイズしてみます。

インラインスタイルが付くパターン

まず、 Standard.js に下記の設定を追加してみます。

"imagePosition": true

これだけで、上記画像のようにポジションを設定する欄が追加されます。

これで、Position を Right にした場合は画像部分は下記のような HTML になります。

<figure style="float: right; margin: 0px 0px 10px 10px;"><img src="https://tinybeans.net/assets/upload/images/imagePosition-min.png" data-image="8329"></figure>

figure タグに float や margin が設定されています。

なお、このマージンの値は下記のオプションを追加して変更できます。

imageFloatMargin: '20px'

クラスが付くパターン

上記のようにインラインスタイルを適用したくない場合は、下記のように設定すると、figure タグにクラス名が付くだけになります。

"imagePosition": { "left": "image-left", "right": "image-right", "center": "image-center"}

書き出される HTML は下記のとおりです。後々のことを考えると、後者の設定の方が良いでしょうね。

<figure class="image-right"><img src="https://tinybeans.net/assets/upload/images/imagePosition-min.png" data-image="8329"></figure>

参考

Settings / Image

以上です。

インラインスタイルが付くパターン

クラスが付くパターン

参考

「Craft CMS」カテゴリの記事一覧