ちょいちょいWYSIWYGで画像アップロードが必要な案件がきて実装しようとするけど毎回すんなりいかない。
記事をアップしてる方もいらっしゃるけど
同じようにやってもうまくいかない。
とりあえず、この通りにやれば
正常に動作するという雛形が欲しかったのでメモ
■各バージョン
ckeditor：4.14.0
kcfinder：2.4
フォルダは、C:/xampp/htdocs/ckeditorで
ckeditorというLaravelで作成したばかりのプロジェクトで進めます。
■ckeditorダウンロード
https://ckeditor.com/ckeditor-4/download/
からダウンロード
■ダウンロードしたzip解凍
ダウンロードしたckeditor_x.xx.x_xxxxx.zipをpublic\jsフォルダで解凍します。
※解凍したフォルダは’ckeditor’にして下さい。
■ckeditor.jsへの参照
resources\views\welcome.blade.phpの</head>の前に以下を追記します。
<script src="<?= url('') ?>/js/ckeditor/ckeditor.js"></script>■対象のテキストエリアにid=”ckeditor”を付ける
resources\views\welcome.blade.phpの</body>の前に以下を追記します。
<textarea id="ckeditor"></textarea>
<script>
CKEDITOR.replace( 'ckeditor' );
</script>ブラウザで確認するとテキストエリアがWYSIWYGになります。
■kcfinderダウンロード
https://ja.osdn.net/projects/sfnet_kcfinder/releases/
からダウンロード
■ダウンロードしたzip解凍
ダウンロードしたkcfinder-x.x.zipをpublic\jsフォルダで解凍します。
※解凍したフォルダは’kcfinder’にして下さい。
■ckeditorの設定
public\js\ckeditorのconfig.jsの’}’の前に以下を追加する
config.filebrowserBrowseUrl = 'http://localhost/ckeditor/public/js/kcfinder/browse.php?type=files';
config.filebrowserImageBrowseUrl = 'http://localhost/ckeditor/public/js/kcfinder/browse.php?type=images';
config.filebrowserFlashBrowseUrl = 'http://localhost/ckeditor/public/js/kcfinder/browse.php?type=flash';
config.filebrowserUploadUrl = 'http://localhost/ckeditor/public/js/kcfinder/upload.php?type=files';
config.filebrowserImageUploadUrl = 'http://localhost/ckeditor/public/js/kcfinder/upload.php?type=images';
config.filebrowserFlashUploadUrl = 'http://localhost/ckeditor/public/js/kcfinder/upload.php?type=flash';
■kcfinderの設定
public\js\kcfinderのconfig.phpの以下を変更する
'disabled' => false,
'uploadURL' => "http://localhost/ckeditor/public/js/kcfinder/upload/",
'uploadDir' => "C:/xampp/htdocs/ckeditor/public/js/kcfinder/upload/",以上で設定は完了です。
■動作確認
※URLやフォルダはベタで書いていますが、実際は環境に合わせて動的になるように設定して下さい。
■よくあるエラーと確認項目
発生したエラーに対し確認する項目です。
サーバブラウザボタンが表示されない
ckeditorのconfig.jsのfilebrowserImageBrowseUrl
アップロードタブが表示されない
ckeditorのconfig.jsのfilebrowserImageUploadUrl
サーバブラウザ内のサムネが表示されない
ckeditorのconfig.jsのfilebrowserBrowseUrl
「サーバブラウザ」ボタン押下、サーバブラウザが真っ白になり「サーバーを閲覧する権限がありません」アラートが表示される
kcfinderのconfig.phpのdisabledがtrueになっている
画像プロパティ中のプレビューが表示されなくなる（赤いx表示になる）
但し、実際にはアップロードされており、サーバブラウザでは表示される
kcfinderのconfig.phpのuploadURL
画像のアップロードが出来なくなる
ファイルを選択後、「サーバーに送信」ボタン押下で
‘cannot write to upload folder. xxxxx’と表示される
kcfinderのconfig.phpのuploadDir