いつもお世話になっております！ GeekGirlCafeのQiita化を目論んでいる金子です（？？？）

メディアサイトなんかを作るときに、メディア投稿・閲覧機能以外に色々持たせたいから、開発はCakePHPでやるけど記事投稿画面にWordpressみたいなエディター機能がほしい…ってことがあると思います。
エディター機能、さくっと作ることができれば良いのですが、まだまだそんな腕はなく……ライブラリとかでなんとかならないかなあとググっていたときに教えて頂いたのがFroala Editor。
商用利用するには有料だけど、S3と連携する方法が公式サポートされており、デザインも今っぽくて美しく、高性能です。
これはいい！ と思ってすぐに導入を始めましたが、公式ドキュメント通りにやったつもりでも、ちゃんと動くまでには何回も躓いたので、正解ルートを記録していきます。

前提条件

  1. CakePHP3
  2. エディター内で使う画像はAmazonS3に保存する
  3. エディターの言語は日本語に変更する

 

Composerでインストールする

まずは公式ドキュメント通りに、Composer.jsonに次のように追記します。

{
  "require" : {
    "froala/wysiwyg-editor-php-sdk" : "dev-master"
  }
}

追記が終わったらターミナルを立ち上げてサーバーに接続し、インストールしていきますが、なんとここが早くも最初の躓きポイント。

And then run : php composer.phar install

公式にこうやって書いてあるからその通りにしてるのに、失敗するんですけど…なぜ？
と思って以下のコマンドに変更すると、通りました！

php composer.phar update

ちなみにこのコマンドをの書き方ですが、composerコマンドを使ったときに「そんなコマンド知らんがな」みたいに怒られるときにも有効な書き方です。
Qiitaとかだと「composer update」で実行して…って書いてあることが多いと思いますが、私の環境だとどうしてもうまく行きませんでした。先輩に聞いたら「composer」→「php composer.phar」に置き換えると通るよ！ とのことで。それ以降この書き方をしています。最初はこれが分からず一人でめっちゃ焦ってました笑
「vendor」フォルダの下に「froala」というフォルダができていれば成功です。

html

インストールが済んだら、エディターが画面に反映されるようにしていきます。
cssとjsが色々必要なので、公式からダウンロードしてきます。
zipファイルの中に入っているcssとjsを、それぞれ自分のサーバーに移動してください。ここではfroalaというフォルダ名でまるっと放り込みました。
それが終わったら、headerタグの中に次のように追記します。

<header>
<!-- Froala editor関連ここから -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.5/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.5/css/froala_style.min.css" rel="stylesheet" type="text/css" />
    <?= $this->Html->css(['froala']) ?>
    <!-- Froala editor関連終わり -->
</header>

次に、body閉じタグの直前に次のように追記します。ご自分のs3の設定を反映させていってください。

  <!-- ここからfroalaEditorについての設定 -->
    <?php
      $config = array(
        'timezone' => 'タイムゾーン',
        'bucket' => 'バケット名',
        'region' => 'リージョン',
        'keyStart' => 'フォルダ/フォルダ/', //どのフォルダにアップロードファイルを保存するか
        'acl' => '規定ACL',
        'accessKey' => 'アクセスキー',
        'secretKey' => 'シークレットキー'
      );
	  $s3Hash = FroalaEditor_S3::getHash($config);
    ?>    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.1/js/froala_editor.pkgd.min.js"></script> 
    <?= $this->Html->script(['admin/froala/plugins/file.min', 'admin/froala/plugins/image.min', 'admin/froala/languages/ja']) ?> <!-- この行に関しては使用したいプラグインごとに読み込むファイルを変更してください -->
    <script>
	$(function() {
		$('.froala').froalaEditor({
			language: 'ja',
			imageUploadToS3: <?= json_encode((array)$s3Hash) ?>
		})
	});
    </script>

これでclass名に「froala」が設定されている箇所にエディターが出現するようになります。

S3側での設定

CORSの設定を公式ドキュメントを参考に変更していきます。
これで画像がS3にアップロードできる状態になりました。

記事表示画面にcssを適用する

froala editorで作られた記事を実際にviewで表示する際、エディターで記事を書いたときと同じ見た目で表示するためには一手間加えなくてはなりません。エディター上ではきちんと装飾された状態になっていても、実際に記事を表示するページにアクセスすると「ちゃんとレイアウト設定されてないじゃん…」ってことになります。記事表示画面にcssが足りていないせいです。
というわけで、先ほどサーバーに移動したcssの中から「.froala_style.min.css」を探して複製を作り、任意の名前をつけます。
このファイルの中から「.fr-view」を検索してすべて削除してください。
このcssを記事表示画面で読み込まれるように設定すれば、エディターで記事を作ったときと同じレイアウトで記事が表示されるようになります。（本当にこんなことする必要があるのか…？ 私がわかっていないだけで何か用意されていそうです笑）

S3に画像がアップロードされない…

ここまでと同じようにやってみて、S3に画像アップロードされない場合は、editorが設置されているページにhttpsでアクセスしているか確認してください。私はこれをやっておらずかなりの時間を無駄にしました…！

The following two tabs change content below.

金子風月

犬と歯車がついたものと跨り移動系スポーツ（馬・自転車）が好きな駆け出しweb系エンジニア。 2018年2月より、株式会社凛の皆様のおかげで憧れのweb系エンジニアになることができました。