CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法
2024/01/12
CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公式アップロードアダプタがあるもののサーバにコネクタをインストールする必要があるらしい。設置先がレンタルサーバだとインストールできない可能性があるので異なる方法で実装したい。以下に対応方法をメモ。
ソースコード
WYSIWYGエディタ側
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CKEditor</title> <style> .ck-editor__editable_inline { min-height: 200px; } </style> </head> <body> <?php if( $_POST ){ ?> <div>送信結果:</div> <pre><?php var_dump($_POST['editor']);?></pre> <?php } ?> <form action="./index2.php" method="post"> <textarea name="editor" id="editor"></textarea><br> <input type="submit" value="送信"> </form> <script src="//cdn.ckeditor.com/ckeditor5/33.0.0/classic/ckeditor.js"></script> <script src="//cdn.ckeditor.com/ckeditor5/33.0.0/classic/translations/ja.js"></script> <script> ClassicEditor.create( document.querySelector( '#editor' ), { language: 'ja', ckfinder: { uploadUrl: './upload.php' } }).then( editor => { console.log( editor ); }).catch( error => { console.error( error ); }); </script> </body> </html>
画像アップロード側(upload.php)
<?php do{ //アップロード先のパス $path = '/var/www/html/upload/img/'; //アップロード先のURL $url = 'https://hoge.com/upload/img/'; $img = $_FILES['upload']; if( !$img['size'] ){ $msg = '画像がアップロードされていません。'; break; } $ext = $img['type']; if ($ext == 'image/jpeg' || $ext == 'image/jpg') { $tmp_ext = '.jpg'; } elseif ($ext == 'image/png') { $tmp_ext = '.png'; } elseif ($ext == 'image/gif') { $tmp_ext = '.gif'; } elseif ($ext == 'image/webp') { $tmp_ext = '.webp'; } if( !$tmp_ext ){ $msg = 'jpg / png / gif / webpファイルのみアップロードいただけます。'; break; } $img_name = md5(uniqid(rand(), true)) . '_' . time() . $tmp_ext; if( !move_uploaded_file($img['tmp_name'], $path . $img_name) ){ $msg = 'アップロード中にエラーが発生しました。'; break; } $flg = true; }while(0); if( $msg ){ $response = array( 'uploaded' => false, 'error' => array( 'message' => $msg, ), ); }else{ $response = array( 'url' => $url . $img_name, 'uploaded' => true, ); } echo json_encode($response);
アップロード先のパスとURL部分は適宜変更する。
参考サイト
関連記事
-
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...
-
-
NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法
NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本 ...
-
-
サイトにHTMLエディタ(WYSIWYG)を導入する方法
シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...
-
-
CKEditor5(WYSIWYGエディタ)をページ遷移無しでtextareaに切り替える方法
ラジオボタンを選択することでCKEditor5(ウィジウィグエディタ)とテキスト ...
-
-
ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)
あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...