summernote editor php 이미지 업로드 및 글자수 체크

summernote 다운로드
https://summernote.org/getting-started/

Summernote - Super Simple WYSIWYG editor

필요한 css 와 javascript를 불러옵니다.
summernote-lite.css
summernote-lite.js
summernote-ko-KR.js

jQuery 모듈을 연결해 주어야 합니다.(summernote 에서는 bootstrap 3 또는 4를 사용한다고 나옵니다.)

<!-- 에디터 출력영역 -->
<textarea id="summernote" name="editordata"></textarea>

<!-- 에디터 이미지를 저장할 임시폴더 -->
<input type="hidden" name="tempFolder" id="tempFolder" value="임시폴더명" />

에디터용 스크립트

$(document).ready(function() {
	//에디터 설정
	$('#summernote').summernote({
        height: 300,                 // 에디터 높이
        minHeight: null,             // 최소 높이
        maxHeight: null,             // 최대 높이
        focus: true,                  // 에디터 로딩후 포커스를 맞출지 여부
        lang: "ko-KR",					// 한글 설정
        placeholder: '내용을 등록합니다.',	//placeholder 설정
        toolbar:[
            ['fontsize', ['fontsize']],
            ['style', ['bold', 'italic', 'underline','strikethrough', 'clear']],
            ['color', ['forecolor','color']],
            ['table', ['table']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['insert',['picture','link','video']],
            ['view', ['fullscreen', 'codeview', 'help']]
            ],
        fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New','맑은 고딕','궁서','굴림체','굴림','돋움체','바탕체'],
        fontSizes: ['8','9','10','11','12','14','16','18','20','22','24','28','30','36','50','72'],
        callbacks: {
            onImageUpload: function (files) { //이미지 업로드 처리
                RealTimeImageUpdate(files, this);
            },
            onChange:function(contents, $editable){ //텍스트 글자수 및 이미지등록개수
                setContentsLength(contents, 0);
            }
        }
	});

    //$('#summernote').summernote('code', "글 수정시 데이터");
    //$(".note-group-image-url").remove(); //이미지 추가할 때 Image URL 등록 input 삭제

	//글자수 체크
    //태그와 줄바꿈, 공백을 제거하고 텍스트 글자수만 가져옵니다.
	function setContentsLength(str, index) {
	    var status = false;
	    var textCnt = 0; //총 글자수
	    var maxCnt = 100; //최대 글자수
	    var editorText = f_SkipTags_html(str); //에디터에서 태그를 삭제하고 내용만 가져오기
	    editorText = editorText.replace(/\s/gi,""); //줄바꿈 제거
	    editorText = editorText.replace(/ /gi, ""); //공백제거

        textCnt = editorText.length;
	    if(maxCnt > 0) {
        	if(textCnt > maxCnt) {
                status = true;
        	}
	    }

	    if(status) {
        	var msg = "등록오류 : 글자수는 최대 "+maxCnt+"까지 등록이 가능합니다. / 현재 글자수 : "+textCnt+"자";
        	console.log(msg);
	    }
	}

	//이미지 등록처리
    function RealTimeImageUpdate(files, editor) {
        var status = false;
        var reg = /(.*?)\.(gif|jpg|png|jepg)$/; //허용할 확장자
        
        var formData = new FormData();
        var fileArr = Array.prototype.slice.call(files);
        var filename = "";
        var fileCnt = 0;
        fileArr.forEach(function(f){
            filename = f.name;
            if(filename.match(reg)) {
                formData.append('file[]', f);
                fileCnt++;
            }
        });
        formData.append('tempFolder', $('#tempFolder').val());

        if(fileCnt <= 0) {
            alert("파일은 gif, png, jpg 파일만 등록해 주세요.");
            return;
        } else {
            $.ajax({
                url : "이미지 업로드 처리할 주소",
                data:formData,
                cache:false,
                contentType:false,
                processData:false,
                enctype:'multipart/formDataData',
                type:'POST',
                success:function(result) {
                    var data = JSON.parse(result);
                    for(x = 0; x < data.length; x++) {
                        var img = $('<img>').attr({src:data[x]});
                        $(editor).summernote('pasteHTML', '<img src="'+data[x]+'" />');
                    }
                }
            });
        }
    }
});

//에디터 내용 텍스트 제거
function f_SkipTags_html(input, allowed) {
	// 허용할 태그는 다음과 같이 소문자로 넘겨받습니다. (<a><b><c>)
    allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join('');
    var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
    commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
    return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
        return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
    });
}

PHP 이미지 업로드 

//업로드할 폴더
$uploads_dir = $this->input->post('tempFolder');

//폴더가 없으면 생성해 줍니다.
if(!is_dir($_SERVER['DOCUMENT_ROOT']."/".$uploads_dir)) {
    @mkdir($_SERVER['DOCUMENT_ROOT']."/".$uploads_dir, 0777);
    @chmod($_SERVER['DOCUMENT_ROOT']."/".$uploads_dir, 0777);
}

//업로드 허용 확장자
$allowed_ext = array('jpg','jpeg','png','gif');

//결과를 담을 변수
$result = array();
foreach($_FILES['file']['name'] as $f=>$name) {
    $name = $_FILES['file']['name'][$f];
    
    //확장자 추출
    $exploded_file = strtolower(substr(strrchr($name, '.'), 1));
    
    //변경할 파일명(중복되지 않게 처리하기 위해 파일명을 변경해 줍니다.)
    $thisName = date("YmdHis",time())."_".md5($name).".".$exploded_file;
    
    //업로드 파일(업로드 경로/변경할 이미지 파일명)
    $uploadFile = $uploads_dir."/".$thisName;
    if(in_array($exploded_file, $allowed_ext)) {
        if(move_uploaded_file($_FILES['file']['tmp_name'][$f], $uploadFile)){
            //파일을 업로드 폴더로 옮겨준후 $result 에 해당 경로를 넣어줍니다.
            array_push($result, "/".$uploadFile);
        }
    }
}

echo json_encode($result, JSON_UNESCAPED_UNICODE);