CK에디터로 올린 이미지에서 썸네일 뽑아내기 ( 정규식 )

CK에디터를 사용중, 이미지 올리기를 이용해 올린 이미지를 썸네일로 사용하고 싶었다.

 

단, 글작성을 해야 PR KEY가 생성되어 글을 구분할 수 있게되는데,

 

에디터를 사용해 이미지를 출력할때는 ResponsBody를 이용해 비동기 방식으로 

 

로컬에 이미지를 올리고, 해당 경로를 리턴해줘서 에디터가 올린 이미지를 출력할 수 있게 해준다.

 

즉, 생성된 글의 PR이 없고 에디터로 올린 이미지는 그저 저장된 경로만 알 수 있는 것이다 ( 분류 불가능 )

 

 

그렇다고 썸네일 사진을 따로 등록하라고 input type=file 과 mutipart를 이용해 구현하기에는 

 

귀찮 ;;;;; 기도하고 무엇보다! 사용자가 썸네일 이미지를 따로 업로드 해야하니 불편하다...

 

그래서 에디터로 등록한 이미지를 뽑아서 썸네일로 사용하고 싶었다.

 

네이버 글작성만 이용해봐도 에디터로 올린 이미지 중 선택해서 썸네일로 사용하게 할 수 있는 기능도 있으니

 

당연히 구현이 가능하다고 생각했다.

 

 

단 정규식이라는 방법을 생각하지 못해서 어떻게 방식을 사용해야하는지 OKKY에 질문글을 올렸는데,

 

친절하게도 어느 한분이 정규식을 사용하면 될 것이다. 라는 힌트를 주셨다.

 

 

 

에디터를 사용해서 글을 작성하면 

 

input type="text"와 같이 text만 받는 것이 아니라, 

 

폰트나 띄어쓰기같은 모든 부분을 html코드로 받는다. 

 

물론 이미지도 html코드 <img>태그로 받기 때문에,

 

올린 이미지를 따로 분류할 수는 없지만 받아온 에디터의 값에서 태그를 뽑아낼 수 있다.

 

	//리뷰 중 첫번째 사진 썸네일로 지정
	public String getImgSrc(String content) {
		  Pattern nonValidPattern = Pattern
			  		.compile("(?i)< *[IMG][^\\>]*[src] *= *[\"\']{0,1}([^\"\'\\ >]*)");
			  		int imgCnt = 0;
			  		String img = "";
			  		Matcher matcher = nonValidPattern.matcher(content);
			  		while (matcher.find()) {
			  			img = matcher.group(1);
			  			imgCnt++;
			  			if(imgCnt == 1){
			  		        break;                                  
			  		    }
			  		}
			  		return img;
	}

받아온 값에서 img태그의 scr (사진경로) 중, 가장 첫번째것을 리턴하는 메서드이다.

 

 

 

 

	public Review reviewInsert(Review review, Location location)throws Exception{
    
    
		String imgSrc = getImgSrc(review.getContent());
        
		if(imgSrc != "") {
		review.setRimg(imgSrc);
		//업데이트 시 최신리뷰 썸네일로 location 사진을 변경
		mapMapper.locationImg(locationLno.getLno(),imgSrc);
		}


		return reviewRepository.save(review);
	}

위의 코드는 지금 제작중인 프로젝트의 service단이다. ( 필요없는 부분은 제외 ) 

 

먼저, 프론트에서 작성한 글을 Review라는 Entity로 받아온다.

 

에디터로 작성한 html코드를 String형식으로 content라는 변수로 받아온다.

 

위의 정규식 메서드에 해당 값을 넣고, html코드중 Img태그를 뽑아낸다.

 

그 후 첫번째 img태그를 String imgSrc로 리턴받으면 첫번째 사진의 경로를 받아왔다.

 

만약 에디터로 사진을 올리지 않았을때를 if문으로 구분시켜주고,

 

DB에 따로 이미지 경로를 저장하는 문자열컬럼을 만들어서 insert 시켜준다.

 

 

이렇게 에디터로 작성한 html 코드의 img 태그에서, 사진경로를 나타내는 scr="" 의 값을 가져와서 

 

DB에 넣어줌으로써 썸네일을 출력할 수 있게되었다.

 

 

좀 더 응용해보면, 글작성전에 모든 img태그 List에 넣어서 비동기방식으로 출력 후 , 

 

사용자가 출력 된 사진을 선택 할 수 있게 구현해서 선택한 img태그를 DB에 insert되도록 해준다면

 

내가 참고한 네이버 글작성처럼 에디터로 올린 이미지 중 썸네일로 지정 할 사진을 선택할 수 있을 것이다.

 

 

완전 처음부터 만들려면 시간과 노력이 좀 들어갈 것 같기 때문에,

 

이 방법은 추후 다른 프로젝트에서 구현해보도록 하려고 한다.