🐥

Laravel-adminに入れたckeditorで文字色や背景色も扱えるようにする

2021/12/22に公開

laravel-admin-extensions/ckeditor を使用して、Laravel-Adminでckeditorというリッチエディタを入れることができたのは良いものの、

まさかの文字色が編集できなくて、背景色も編集できなくて、
しかも情報がほとんどないではないか...!!!

ということで、頑張りました。

laravel-admin-extensions/ckeditorはインストールしている前提で始めます。

準備編:ckeditorのバージョンを知る

ckeditorのバージョンを知る必要があります。

googleのデベロッパーコンソールで、 CKEDITOR.version と打つとバージョンが表示されます。
僕の場合は4.10.1ですね。この数字を覚えておきます

同じバージョンのプラグインをダウンロードしてくる

こちらはckeditor4系のリポジトリです。
https://github.com/ckeditor/ckeditor4

こちらからまずは4.10.1のタグに移動します。

そして、特定のディレクトリだけのダウンロードはできないので、
このリポジトリごとzipダウンロードします。

文字色、背景色をつけたい場合は「colorbutton」「panelbutton」という2つのプラグインを、構築したlaravelの public/vendor/laravel-admin-ext/ckeditor/plugins の中に入れる必要があります。

ダウンロードしたzipを解凍して plugins/colorbuttonplugins/panelbuttonpublic/vendor/laravel-admin-ext/ckeditor/plugins に移動させます。

これでプラグインのインストール完了です。

プラグインを有効化する

config/admin.php を開いて extensionsの部分をこのように修正します。

<?php

    'extensions' => [
        'ckeditor' => [

            //Set to false if you want to disable this extension
            'enable' => true,

            // Editor configuration
            'config' => [
                    'extraPlugins' => 'colorbutton', // これを追記する
                ],
        ]
    ],

これで画面を開いたら、出てきましたね!

全然情報が出てこなかったので焦りました。できてよかった。。。。

Discussion