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);
	}
}

実行

アップロードを選択

ファイルを選択

アップロード完了