CKEditor の拡張画像プラグインで挿入される class 属性値をカスタマイズする

concrete5 8.x で採用されている CKEditor には、拡張画像プラグインが同梱されており、管理画面の「記事ブロックエディター設定」から有効にできます。デフォルトの画像ボタンと異なり、画像にキャプションをつけることができるほか、画像に左・中央・右の寄せを設定できます。この行揃えの設定結果が、class 属性値として挿入されます。

  • 左寄せの場合: .content-editor-image-left
  • 中央寄せの場合:.content-editor-image-center
  • 右寄せの場合:.content-editor-image-right

この class 名に合わせて CSS を作成しても良いですが、作成済の CSS に合わせたい場合、この class 属性値を変更することができます。

設定は、application/config/site.php に記載します。

<?php

return [
    'sites' => [
        'default' => [
            'editor' => [
                'ckeditor4' => [
                    'custom_config_options' => [
                        // キャプションをつけたときに figure 要素につく class
                        'image2_captionedClass' => 'img-caption',
                        // 行揃えを選択したときにつく class
                        'image2_alignClasses' => [
                            'img-left',
                            'img-center',
                            'img-right',
                        ],
                    ],
                ],
            ],
        ],
    ],
];

参考までに、カスタマイズ前の状態で、どの要素に class が付与されるかのサンプルを以下に示します。

<h1>拡張画像プラグインによる画像の挿入例</h1>

<p>行揃え:なし</p>

<p>
    <picture><!--[if IE 9]>
        <video style='display: none;'><![endif]-->
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 900px)">
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 768px)">
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png">
        <!--[if IE 9]></video><![endif]--><img src="http://concrete5.test/application/files/4115/4398/3254/blank.png"
                                               alt="blank.png" height="397" width="592"></picture>
</p>

<p>行揃え:左</p>

<p>
    <picture><!--[if IE 9]>
        <video style='display: none;'><![endif]-->
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 900px)">
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 768px)">
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png">
        <!--[if IE 9]></video><![endif]--><img src="http://concrete5.test/application/files/4115/4398/3254/blank.png"
                                               alt="blank.png" class="content-editor-image-left" height="397"
                                               width="592"></picture>
</p>

<p>行揃え:中央</p>

<p class="content-editor-image-center">
    <picture><!--[if IE 9]>
        <video style='display: none;'><![endif]-->
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 900px)">
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 768px)">
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png">
        <!--[if IE 9]></video><![endif]--><img src="http://concrete5.test/application/files/4115/4398/3254/blank.png"
                                               alt="blank.png" height="397" width="592"></picture>
</p>

<p>行揃え:右</p>

<p>
    <picture><!--[if IE 9]>
        <video style='display: none;'><![endif]-->
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 900px)">
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 768px)">
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png">
        <!--[if IE 9]></video><![endif]--><img src="http://concrete5.test/application/files/4115/4398/3254/blank.png"
                                               alt="blank.png" class="content-editor-image-right" height="397"
                                               width="592"></picture>
</p>

<p>行揃え:なし</p>

<figure class="content-editor-image-captioned">
    <picture><!--[if IE 9]>
        <video style='display: none;'><![endif]-->
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 900px)">
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 768px)">
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png">
        <!--[if IE 9]></video><![endif]--><img src="http://concrete5.test/application/files/4115/4398/3254/blank.png"
                                               alt="blank.png" height="397" width="592"></picture>
    <figcaption>キャプション</figcaption>
</figure>

<p>行揃え:左</p>

<figure class="content-editor-image-captioned content-editor-image-left">
    <picture><!--[if IE 9]>
        <video style='display: none;'><![endif]-->
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 900px)">
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 768px)">
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png">
        <!--[if IE 9]></video><![endif]--><img src="http://concrete5.test/application/files/4115/4398/3254/blank.png"
                                               alt="blank.png" height="397" width="592"></picture>
    <figcaption>キャプション</figcaption>
</figure>

<p>行揃え:中央</p>

<div class="content-editor-image-center">
    <figure class="content-editor-image-captioned">
        <picture><!--[if IE 9]>
            <video style='display: none;'><![endif]-->
            <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png"
                    media="(min-width: 900px)">
            <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png"
                    media="(min-width: 768px)">
            <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png">
            <!--[if IE 9]></video><![endif]--><img
                    src="http://concrete5.test/application/files/4115/4398/3254/blank.png" alt="blank.png" height="397"
                    width="592"></picture>
        <figcaption>キャプション</figcaption>
    </figure>
</div>

<p>行揃え:右</p>

<figure class="content-editor-image-captioned content-editor-image-right">
    <picture><!--[if IE 9]>
        <video style='display: none;'><![endif]-->
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 900px)">
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 768px)">
        <source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png">
        <!--[if IE 9]></video><![endif]--><img src="http://concrete5.test/application/files/4115/4398/3254/blank.png"
                                               alt="blank.png" height="397" width="592"></picture>
    <figcaption>キャプション</figcaption>
</figure>