Laravel

【Laravel7,8】リッチエディタ(ckeditor)を導入

えびさん

unisharp/laravel-ckeditorをインストールしようとしたら、
Laravel7以降に対応してなかったからゴニョゴニョした時のメモ

エラー内容

Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Installation request for unisharp/laravel-ckeditor ^4.7 -> satisfiable by unisharp/laravel-ckeditor[4.7.2].
    - Conclusion: remove laravel/framework v7.29.2
    - Conclusion: don't install laravel/framework v7.29.2
    - unisharp/laravel-ckeditor 4.7.2 requires illuminate/support ~5.0 -> satisfiable by illuminate/support[5.0.x-dev, 5.1.x-dev, 5.2.x-dev, 5.3.x-dev, 5.4.x-dev, 5.5.x-dev, 5.6.x-dev, 5.7.17, 5.7.18, 5.7.19, 5.7.x-dev, 5.8.x-dev, v5.0.0, v5.0.22, v5.0.25, v5.0.26, v5.0.28, v5.0.33, v5.0.4, v5.1.1, v5.1.13, v5.1.16, v5.1.2, v5.1.20, v5.1.22, v5.1.25, v5.1.28, v5.1.30, v5.1.31, v5.1.41, v5.1.6, v5.1.8, v5.2.0, v5.2.19, v5.2.21, v5.2.24, v5.2.25, v5.2.26, v5.2.27, v5.2.28, v5.2.31, v5.2.32, v5.2.37, v5.2.43, v5.2.45, v5.2.6, v5.2.7, v5.3.0, v5.3.16, v5.3.23, v5.3.4, v5.4.0, v5.4.13, v5.4.17, v5.4.19, v5.4.27, v5.4.36, v5.4.9, v5.5.0, v5.5.16, v5.5.17, v5.5.2, v5.5.28, v5.5.33, v5.5.34, v5.5.35, v5.5.36, v5.5.37, v5.5.39, v5.5.40, v5.5.41, v5.5.43, v5.5.44, v5.6.0, v5.6.1, v5.6.10, v5.6.11, v5.6.12, v5.6.13, v5.6.14, v5.6.15, v5.6.16, v5.6.17, v5.6.19, v5.6.2, v5.6.20, v5.6.21, v5.6.22, v5.6.23, v5.6.24, v5.6.25, v5.6.26, v5.6.27, v5.6.28, v5.6.29, v5.6.3, v5.6.30, v5.6.31, v5.6.32, v5.6.33, v5.6.34, v5.6.35, v5.6.36, v5.6.37, v5.6.38, v5.6.39, v5.6.4, v5.6.5, v5.6.6, v5.6.7, v5.6.8, v5.6.9, v5.7.0, v5.7.1, v5.7.10, v5.7.11, v5.7.15, v5.7.2, v5.7.20, v5.7.21, v5.7.22, v5.7.23, v5.7.26, v5.7.27, v5.7.28, v5.7.3, v5.7.4, v5.7.5, v5.7.6, v5.7.7, v5.7.8, v5.7.9, v5.8.0, v5.8.11, v5.8.12, v5.8.14, v5.8.15, v5.8.17, v5.8.18, v5.8.19, v5.8.2, v5.8.20, v5.8.22, v5.8.24, v5.8.27, v5.8.28, v5.8.29, v5.8.3, v5.8.30, v5.8.31, v5.8.32, v5.8.33, v5.8.34, v5.8.35, v5.8.36, v5.8.4, v5.8.8, v5.8.9].
    - don't install illuminate/support 5.5.x-dev|don't install laravel/framework v7.29.2
    - don't install illuminate/support v5.5.0|don't install laravel/framework v7.29.2
(省略)

なんと、unisharp/laravel-ckeditorはlaravel v5.*までしかサポートしていないらしい。涙

今回やったこと

  1. laravel-ckeditorではなく、本家のckeditor/ckeditorを入れる
  2. インストールしたパッケージ一式をpublicディレクトリ以下に移動する
  3. Viewで読み込んで使う

本家ライブラリをインストール

composer require ckeditor/ckeditor

これで、vendorディレクトリの中にckeditorディレクトリが生成される

public以下にパッケージ一式を移動する

上記で生成されたckeditorディレクトリをpublicの下にコピーする

mkdir public/ckeditor
cp -r vendor/ckeditor/ckeditor public

もちろん手動でコピー移動してもOK
コピー後はこんな感じ

viewで読み込んで使ってみる

<body>
<textarea id="ckeditor"></textarea>

<script src="{{ asset('ckeditor/ckeditor.js')}}"></script>
<script>
    CKEDITOR.replace('ckeditor');
</script>
</body>

CKEDITOR.replaceメソッドの引数 (上記だと'ckeditor')には
リッチエディタにしたいtextareaのIDを指定する

また、ckeditor.jsの読み込み & 実行処理は
HTMLの終わりの方(</body>の前)で呼び出すようにする

\ 表示された /

コンパイルエラーが出た場合

もしこんなエラーが出たら

app.js:38306 [Vue warn]: Error compiling template:

<script src="{{ asset('js/app.js') }}" defer></script>
↓ここのdeferをとる
<script src="{{ asset('js/app.js') }}"></script>

その後、上記ソースをckeditor.jsの呼び出しの前に移動する

<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('ckeditor/ckeditor.js')}}"></script>
<script>
    CKEDITOR.replace('ckeditor');
</script>
</body>

画像アップロードしたい場合

  • 下記記事にて
【Laravel7,8】リッチエディタ(ckeditor)で画像アップロード実装

\ 案件のご依頼・ご相談はこちらから /