cakephp3＋nicEdit+nicUploadプラグインでWysiwyg画像挿入

15211 ワード
wysiwyg nicUpload nicEdit cakephp3 nicEdit テキストリンク

calephp3とnicEdit、nicUploadプラグインを使用してWysiwyg画像挿入

主に自分用の覚書です。（すごく忘れっぽいので）

nicEdit+nicUpload

nicEdit

nicEditは日本語化されたものを使用
nicEdit日本語版(CMONOS.JP)
ただ、この日本語版にはnicUploadは含まれない。
CMONOS.JP開発者様曰く

弊社で配布している日本語版では、弊社が開発しております CMONOS.JP と
併用しにくいプラグインについては省略しております。
ですから仕様といえば仕様になりますが、本家の画像アップロードプラグイン部分を
日本語版にコピーすれば動作するのではないかと思います(恐れ入りますがプラグイン
拡張についてはご自身でお調べください)。

だそうな。

nicUpload

なので本家からnicUploadを穿ってきて日本語版に移植します。
nicEdit本家

  • nicEdit終端にとってきたnicUploadを追加する。
  • nicEditに付属しているnicEditorIcons.gifにはUploadの アイコンが入っていないので本家のnicEdit付属のnicEditorIcons.gif からUploadのアイコンを移植する。（要画像編集ソフト{ペイントとか})

nicEditの変更

  • アイコンリストの変更
nicEdit.js（original）321行目
iconList : {"xhtml":1,"bgcolor":2,"forecolor":3,"bold":4,"center":5,"hr":6,"indent":7,"italic":8,"justify":9,"left":10,"ol":11,"outdent":12,"removeformat":13,"right":14,"save":25,"strikethrough":16,"subscript":17,"superscript":18,"ul":19,"underline":20,"image":21,"link":22,"unlink":23,"close":24,"arrow":26,"undo":27,"redo":28},
nicEdit.js（new）321行目
iconList : {"xhtml":1,"bgcolor":2,"forecolor":3,"bold":4,"center":5,"hr":6,"indent":7,"italic":8,"justify":9,"left":10,"ol":11,"outdent":12,"removeformat":13,"right":14,"save":25,"strikethrough":16,"subscript":17,"superscript":18,"ul":19,"underline":20,"image":21,"link":22,"unlink":23,"close":24,"arrow":26,"undo":27,"redo":28,"upload":29},

*画像アップロード先の変更
本家は外部のサイトにアップロードするようになっているので
自前のcakephp3で作ったサイトにアップロードするように仕向ける。

nicEdit.js（original）
    nicURI : 'https://api.imgur.com/3/image',
nicEdit.js（new）
    nicURI : 'http://localhost/unko/tinko/wysiwyg/fileupload',

cakephp3側

controllerを作成

画像をアップロードするControllerを作成する

WysiwygController.php
<?php
namespace app\Controller\unko;

use Cake\Controller\Controller;

class WysiwygController extends Controller {

    public function fileupload() {

        $this->autoRender = false;

        $data = $this->request->getData();

        $path = "img/uploadWysiwyg/" . rand().$data['image']['name'];
        move_uploaded_file($data['image']['tmp_name'], $path);
        $imagedata = getimagesize($path);
        $link = "http://$_SERVER[HTTP_HOST]"."/tinko/".$path;

        $res = array("data" => array("link"  => $link,
                                    "width"  => $imagedata[0],
                                    "height" => $imagedata[1])
        );

        echo json_encode($res);
    }
}

実行

  • アップロードを選択

  • ファイルを選択

  • アップロード完了