🚀

Laravel + CKEditorが便利すぎた件

2021/12/05に公開

Docker

概要

仕事でブログ記事を書く時のエディタを導入することになったので色々調べて実装してみました！

解説

sample.blade.php

   <textarea id="ckeditor" name="pageBody"></textarea>

    {{-- CKEditor --}}
    <script src="//cdn.ckeditor.com/4.15.0/full/ckeditor.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/ckeditor.js"></script>

https://ckeditor.com/docs/index.html

スクリーンショット 2021-11-19 3.58.52.png

js/ckeditor.js


$(function () {

    // エディタへの設定を適用します
    CKEDITOR.replace("ckeditor", {
        uiColor: "#EEEEEE", // UIの色を指定します
        height: 400, // エディタの高さを指定します

        // スペルチェック機能OFF
        scayt_autoStartup: false,

        // Enterを押した際に改行タグを挿入
        enterMode: CKEDITOR.ENTER_BR,

        // Shift+Enterを押した際に段落タグを挿入
        shiftEnterMode: CKEDITOR.ENTER_P,

        // idやclassを指定可能にする
        allowedContent: true,

        // ファイルマネージャー関連
        filebrowserImageBrowseUrl: "/laravel-filemanager?type=Images",
        filebrowserImageUploadUrl:
            "/laravel-filemanager/upload?type=Images&_token=",
        filebrowserBrowseUrl: "/laravel-filemanager?type=Files",
        filebrowserUploadUrl: "/laravel-filemanager/upload?type=Files&_token=",

        // preコード挿入時
        format_pre: {
            element: "pre",
            attributes: {
                class: "code",
            },
        },
        // タグのパンくずリストを削除
        removePlugins: "elementspath",

        // webからコピペした際でもプレーンテキストを貼り付けるようにする
        forcePasteAsPlainText: true,

        // 自動で空白を挿入しないようにする
        fillEmptyBlocks: false,

        // タブの入力を無効にする
        tabSpaces: 0,
    });
};

画像もアップロードできるようにしてみた

https://www.webopixel.net/php/1264.html

bash

composer require unisharp/laravel-filemanager

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

  Problem 1
    - Installation request for unisharp/laravel-filemanager ^2.2 -> satisfiable by unisharp/laravel-filemanager[v2.2.0].
    - unisharp/laravel-filemanager v2.2.0 requires ext-exif * -> the requested PHP extension exif is missing from your system.

解決方法

DockerFile

RUN docker-php-ext-install exif
RUN docker-php-ext-configure exif \
            --enable-exif

bash

composer require unisharp/laravel-filemanager

最後に

読んでいただきありがとうございます。
今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。

GitHubで編集を提案

概要

解説

画像もアップロードできるようにしてみた

解決方法

最後に

Discussion