calephp3 및 nicEdit, nicUpload 플러그인을 사용하여 Wysiwyg 이미지 삽입

주로 자신의 각서입니다. (매우 잊어버리기 때문에)

nicEdit+nicUpload

nicEdit

nicEdit는 일본어화된 것을 사용
nicEdit 일본어판(CMONOS.JP)
단, 이 일본어판에는 nicUpload는 포함되지 않는다.
CMONOS.JP 개발자 모습

당사에서 배포하는 일본어 버전에서는 당사가 개발하고 있습니다. CMONOS.JP
병용하기 어려운 플러그인에 대해서는 생략하고 있습니다.
그래서 사양이라고하면 사양이되지만, 본가의 이미지 업로드 플러그인 부분을
일본어 버전에 복사하면 작동하지 않을까 생각합니다 (죄송하지만 플러그인
확장에 대해서는 직접 확인하십시오.)

그렇다.

nicUpload

그래서 본가로부터 nicUpload를 입어 와서 일본어판에 이식합니다.
nicEdit 본가

nicEdit 터미네이션에 온 nicUpload를 추가한다.

nicEdit와 함께 제공되는 nicEditorIcons.gif에 업로드
아이콘이 들어 있지 않기 때문에 본가의 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 만들기

이미지를 업로드하는 컨트롤러 만들기

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

실행

업로드 선택

파일 선택

업로드 완료