CakePHPにCKEditorを導入して記述で画像をアップロードする方法

261 回閲覧されました

公開日 : 2024年5月17日

みなさんこんにちは、jonioです。

今回はCakePHPにCKEditorを導入して記事を投稿する際に画像アップロードをするのを記述でやる方法について解説します。

ネットを調べるとCKFinder・ KCFinderというのを使うみたいですが今回の解説では使いません。

私は最初ネットを探しましたがちゃんと実装できる記事を見かけませんでした。

ですがこの記事を読めば実装できるはずです。

1 前提条件
2 csrfの解除
3 uploadImageアクション
4 add.php
5 動作確認

前提条件

CKEditor自体の導入方法は解説しませんので私が書いた記事を読んで下さい。

CakePHP4にCKEditorをCDNで導入する方法

みなさんこんにちは、jonioです。今回はCakePHP4 […]

それでは解説します。

csrfの解除

CakePHP4からはcsrf対策が自動的に入る設定になっているのですが画像をアップロードする時はこれを外します。

この設定を外さないと画像をアップロードする時に投稿のTokenと一致しないみたいなエラーが表示されます。

「CakePHPのプロジェクト > src > Application.php」のコードを修正しますが画像をアップロードするアクション（あとで説明しますがuploadImageアクションです）だけ解除します。

コードを下記にします、必要な部分だけ記載します。

public function middleware(MiddlewareQueue $middlewareQueue): MiddlewareQueue
{
  $middlewareQueue
  // Catch any exceptions in the lower layers,
  // and make an error page/response
  ->add(new ErrorHandlerMiddleware(Configure::read('Error')))

  // Handle plugin/theme assets like CakePHP normally does.
  ->add(new AssetMiddleware([
    'cacheTime' => Configure::read('Asset.cacheTime'),
  ]))

  // Add routing middleware.
  // If you have a large number of routes connected, turning on routes
  // caching in production could improve performance. For that when
  // creating the middleware instance specify the cache config name by
  // using it's second constructor argument:
  // `new RoutingMiddleware($this, '_cake_routes_')`
  ->add(new RoutingMiddleware($this))

  // Parse various types of encoded request bodies so that they are
  // available as array through $request->getData()
  // https://book.cakephp.org/4/en/controllers/middleware.html#body-parser-middleware
  ->add(new BodyParserMiddleware())

  ->add(new RoutingMiddleware($this))
    
  ->add(new AuthenticationMiddleware($this));


  //ここから削除
  // Cross Site Request Forgery (CSRF) Protection Middleware
  // https://book.cakephp.org/4/en/controllers/middleware.html#cross-site-request-forgery-csrf-middleware
  // ->add(new CsrfProtectionMiddleware([
  //     'httponly' => true,
  // ]));
  //ここまで削除


  //ここから追加
  $csrf = new CsrfProtectionMiddleware([
    'httponly' => true,
  ]);    
  
  $csrf->skipCheckCallback(function ($request) {
    if ($request->getParam('controller') == 'Posts' && $request->getParam('action') == 'uploadImage') {
      return true;
    }
  });
  
  $middlewareQueue->add($csrf);
  //ここまで追加
  

  return $middlewareQueue;
}

46行目のPostsがコントローラー名（あとで説明します）でuploadImageがアクション名です。

uploadImageアクション

記事を投稿するコントローラーをPostsコントローラーとします。

addアクションで記事を投稿していましたが画像をアップロードするアクションを「uploadImage」アクションとします。

uploadImageアクションの記述を下記にします。

public function uploadImage()
{
  if ($this->request->is('post')) {

    $upload_file = $this->request->getData('upload');

    $image_name = $upload_file->getClientFilename();
    
    $upload_file->moveTo(WWW_ROOT . 'img/uploads/' . $image_name);

    $image_pass = $this->request->getAttribute('webroot') . 'img/uploads/' . $image_name;

    $this->response = $this->response->withType('application/json')->withStringBody(json_encode(['url' => $image_pass]));

    return $this->response;
  }
}

5行目でCKEditorのフォームに入力した画像を取得しています。

「upload」はname属性ですがCKEditorを使って画像をアップロードする時のname属性はuploadと決まっているみたいです、upload以外にすると画像を取得できませんでした。

7行目でアップロードしたファイルの名前を取得しています。

9行目でアップロードしたファイルをCakePHPのプロジェクトの中に配置しています、「CakePHPのプロジェクト > webroot > img > uploads」の下の階層に配置します。

11行目でアップロードした画像のパス（CakePHPのプロジェクト/webroot/img/uploads/画像名）を取得しています。

13行目はページに返すレスポンスの設定をしています、細かく解説します。

「->withType(‘application/json’)」はMIMEタイプを取得しています。

WEBの世界ではデータの種類を区別するのに拡張子（〜.htmlとか〜.phpとか〜.pngとかの「.」のこと）とMIMEタイプがあり「application/json」の時のMIMEタイプはjsonです。

「->withStringBody(json_encode([‘url’ => $image_pass]))」の「json_encode([‘url’ => $image_pass])」

は「[‘url’ => $image_pass]」をjson形式で表示します。

試しに13行目の下に「dd(json_encode([‘url’ => $image_pass]));」と記述（この記事を読んでいるあなたは今のコードでは動作しないので全部の解説を読み終えてから試して下さい）してエディタに画像を入れて（あとでやり方は説明します）json形式になっているかを確認すると下記になります。

'{"url":"\/img\/uploads\/xxxxx.jpg"}'

urlは「’url‘ => $image_pass」のurlのことで\/img\/uploads\/xxxxx.jpgは$image_passのことです。

「->withStringBody」でページに返す内容（json_encode([‘url’ => $image_pass])）を設定しています。

まとめると13行目はレスポンス（ビュー）に返すデータをjsonタイプを指定して返す内容を画像のパスにしているということになります。

そして15行目でレスポンスにデータを返しています。

add.php

addアクションでCKEditorを使っているのでビューはadd.phpです。

下記の記述をします。

<?php
/**
 * @var \App\View\AppView $this
 * @var \App\Model\Entity\Post $post
 */
?>
<div class="row">
    <aside class="column">
        <div class="side-nav">
            <h4 class="heading"><?= __('Actions') ?></h4>
            <?= $this->Html->link(__('List Posts'), ['action' => 'index'], ['class' => 'side-nav-item']) ?>
        </div>
    </aside>
    <div class="column-responsive column-80">
        <div class="posts form content">
            <?= $this->Form->create($post) ?>
            <fieldset>
                <legend><?= __('Add Post') ?></legend>

                <?php
                    echo $this->Form->control('title');
                    echo $this->Form->control('content',["type"=>"textarea","cols"=>10,"rows"=>2,"label"=>"本文","id"=>"editor"]);
                ?>
            </fieldset>
            <?= $this->Form->button(__('Submit')) ?>
            <?= $this->Form->end() ?>
        </div>
    </div>
</div>


<?= $this->Html->script('//cdn.ckeditor.com/4.7.3/standard/ckeditor.js',['block' => true]) ?>

<script>
  CKEDITOR.replace('editor', {
  
  
    //ここから追加
    language: 'ja',
    filebrowserUploadUrl: '<?= $this->Url->build(['controller' => 'Posts', 'action' => 'uploadImage']) ?>',
    //ここまで追加
    
    
  });
</script>