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

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

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

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

なお、Redactor の設定用の JSON ファイルは config/redactor ディレクトリの中にあります。Redactor プラグインをインストールした時点では、Simple.jsStandard.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 タグに floatmargin が設定されています。

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

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>

参考

以上です。