CKeditor4と画像アップロード（CKfinder使用しない）

行ったこと

• Cakephp にCKeditor4を適用
• 画像アップロードの処理をコントローラに書く

CKeditor適用

公式サイト

View(ctp)ファイル

cdn 経由で呼び出し
※Fullバージョンがおすすめです。

<?= $this->Html->script('https://cdn.ckeditor.com/4.14.0/full/ckeditor.js') ?>

※コントローラ指定

var url = '<?= $this->Url->build(['controller' => 'ImgUpload', 'action' => 'index']) ?>';

var editor = CKEDITOR.replace('editor', {
    language: 'ja',
    toolbarCanCollapse: true,
    filebrowserUploadMethod: 'form',
    filebrowserUploadUrl: url, /* 上で指定したurl(変数) */
    image_previewText: '画像アップロード',
};

ツールバーのオプションなどは今回省略します。

画像アップロード処理

上で指定したImgUploadControllerの内容

namespace App\Controller\Admin;
use App\Controller\AppController;

class ImgUploadController extends AppController
{
public function index()
    {
        if (isset($_FILES['upload']['name'])) {

            $uploaddir = WWW_ROOT;
            $file = $_FILES['upload']['tmp_name'];
            $file_name = $_FILES['upload']['name'];

            $file_name_array = explode(".", $file_name);
            $extension = end($file_name_array);
            $new_image_name = rand() . '.' . $extension;
            chmod($uploaddir.'/uploads', 0777);
            $allowed_extension = array("jpg", "gif", "png");

            if (in_array($extension, $allowed_extension)) {
                move_uploaded_file($file, $uploaddir.'/uploads/'.$new_image_name);
                $function_number = $_GET['CKEditorFuncNum'];
                $url = '/uploads/'.$new_image_name;
                $message = '';
                echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($function_number, '$url', '$message');</script>";
                return;
            }
        }
    }
}

webroot
  ∟ uploads
       ∟ ここに画像ファイルが保存される

参照サイト： https://www.webslesson.info/2019/01/uploading-image-in-ckeditor-with-php.html