🚀
Laravel + CKEditorが便利すぎた件
概要
仕事でブログ記事を書く時のエディタを導入することになったので色々調べて実装してみました！
解説
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>
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,
});
};
画像もアップロードできるようにしてみた
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
最後に
読んでいただきありがとうございます。
今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
Discussion