[스프링]게시판 글작성 에디터 적용과 파일미리보기,이미지 미리보기

저번글에서 다중첨부파일의 crud 기능을 구현하고 이번엔 글작성페이지의 내용부분에 에디터 적용, 첨부파일 미리보기, 

에디터에서 이미지첨부를 위한 컬럼 수정을 해봤습니다.

---

게시판 글쓰기 중, 내용부분에 에디터를 적용해봤다.

네이버 에디터나 다른 오픈소스 에디터를 적용하려고 해봤으나 부트스트랩 기반으로 프론트를 구성한 내 경우는

충돌이 심해 적용방법은 간단하지만 제대로 먹히질 않았다..

그 와중에 summernote 에디터의 lite 버전을 사용하면 충돌없이 사용할 수 있는 것을 확인했다. 

 

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

    <script>
        $(document).ready(function () {

            $('#myEditor').summernote({
                lang: 'ko-KR',
                height: 300,
                placeholder: '내용을 입력하세요',
                toolbar: [
                    ['fontname', ['fontname']],
                    ['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', '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']
               
                
            });


        });
    </script>

해당 코드를 body안에 추가해준다 (본인은 폼태그 뒤쪽에 넣어줌)

 

다른 폴더를 넣어줄 필요 없이 위쪽의 cdn코드를 넣어주고  아래의 스크립트 코드를 넣어준다.

그 후 에디터를 넣고 싶은 위치에 연결시켜주면 된다. 

  $('#myEditor').summernote({ 이부분에서 # 뒤의 이름과 TEXTAREA의 ID값을 같은값으로 매칭시켜주면 쉽게 적용!

 

EX)

<div>
<form method="post">
<textarea id="myEditor" />
</form>
</div>

별거없다. textarea태그의 id값만 매칭시켜주면 된다.

---

에디터를 적용시키고 에디터의 사진첨부 기능을 사용하려고 하니 제대로 먹히질 않았다.

ORA-12899 에러가 뜨고, 열에 대한 값이 너무 크다고 나왔다.

 

에디터의 사진첨부 기능도 파일첨부와 같은 폼태그안에서 파일첨부기능은 정상 작동을 할테고,

아무래도 데이터베이스 문제 같았다. 

 

컬럼의 정보를 확인하기위해 sql디벨로퍼에 들어가서 테이블의 컬럼을 확인해보니,

에디터의 데이터가 들어가는 부분인 content를 varchar2로 만든바람에 최대 용량이 4000Byte밖에 되지 않아서 생기는 문제인 것 같았다. (심지어 최대용량도 2000Byte로 해놓음)

 

그래서 컬럼타입을 CLOB로 바꾸려고 alter table로 해보니 컬럼타입은 바꿀 수 없었다..

 

찾아낸 방법은

 

1. 테이블내에 새로운 CLOB타입 컬럼 생성 
2. update로 varchar2 컬럼의 데이터를 모두 옮김
3. DROP으로 varchar2 컬럼 삭제
4. CLOB타입의 컬럼명을 삭제한 varchar2의 컬럼명으로 바꿈

이렇게 간단히 해결했다. 물론 실제 서비스하는 환경같은 규모에선 상당히 문제가 있는 방법일테니...

처음 데이터구조 설계의 중요성을 느낄 수 있었다.

 

 

alter table mp_board add contentt CLOB; --1

update mp_board set contentt = content; --2


alter table mp_board drop column content; --3

alter table mp_board rename column contentt to content; --4

commit;

---

 

데이터타입을 바꿔준 후 에디터를 확인해보니 사진첨부 모두 제대로 작동했다.

 

첨부파일의 미리보기를 만들어주고 싶어서 

 

첨부파일을 조회해서 상세페이지에 표시해주는 첨부파일조회 기능을 이용했다.

 

<select id="selectFileList" parameterType="int"
		resultType="hashMap">
		SELECT FILE_NO,
		ORG_FILE_NAME,
		ROUND(FILE_SIZE/1024,1) AS FILE_SIZE,
		STORED_FILE_NAME
		
		
		FROM MP_FILE
		WHERE BNO = #{BNO}
		AND DEL_GB = 'N'
		ORDER BY FILE_NO ASC
	</select>

 

첨부파일조회 Mapper에 로컬에 저장된 파일이름을 검색해서 가져오도록 추가(STORED_FILE_NAME)

이 파라미터값들은 게시글조회컨트롤러에서 model.addAttribute로 file 이라는 key값에 담긴다.

 

 

<div class="my-3 p-3 bg-white rounded shadow-sm">
	<c:forEach var="file" items="${file}">
    
	<img src="/image/${file.STORED_FILE_NAME}" style=" max-width: 10%;  height: auto;"><br/>
	
    <a href="#" onclick="fn_fileDown('${file.FILE_NO}'); return false;">${file.ORG_FILE_NAME}</a>(${file.FILE_SIZE}kb)<br>
	</c:forEach>
    	<c:if test="${empty file}">
				<h2>첨부파일이 없습니다</h2>
				</c:if>
	</div>
</div>

 

게시글내용 조회페이지의 첨부파일조회 부분에 

 

<img src="/image/${file.STORED_FILE_NAME}" style=" max-width: 10%;  height: auto;"><br/>

 

추가, 간단하게 이미지를 가져와서 뿌려주도록 만들었다.

 

하지만 이렇게 설정하니 디스패쳐가 폴더를 url을 제대로 못찾는 문제가 발생...

 

appServlet폴더 안의 servlet-context (디스패쳐(프론트 컨트롤러)가 인식할 수 있도록 폴더 범위를 잡아주는 설정파일) 에서

 

<resources mapping="/image/**" location="file:///c:/mp/file/" />

 

파일업,다운로드시 파일이 담기는 로컬저장소의 위치를 추가해줬다.

!참고로 /// 3개가 들어가니 헤갈리지 않도록 주의.. 덕분에 많이 헤맸다..

 

그리고 첨부파일이 없을때는 c:if로 표시가 나게 해준다.

file은 map,List 형태로 가져오니 eq(==)가아닌 empty를 사용해서 비교해준다.

---

결과 : 

에디터 적용 내용

첨부파일이 있을때

첨부파일이 없을때

이렇게 적용하고나니 첨부파일과 미리보기,에디터, 에디터 글내용에 사진첨부가 모두 잘 적용됐다.

 

그런데 다중파일 업로드시 그 파일이 조회되고 다운로드 할 수 있도록 로직을 구성했으나

에디터로 사진(파일)을 첨부하면 여러개의 파일을 올려도 마지막 하나만 조회되는 문제가 생겼다.

하지만 사진은 내용에 정상 출력되고 서버에도 잘 들어간다. 

파일조회는 파일의 번호를 기준으로 index(+1)가 들어가서 다중조회를 할 수 있도록 만들었는데

아무래도 index가 들어가지 않아서 마지막파일이 전 파일대신 덮어쓰기 되는 것 같다. (인덱스번호 중복시 파일이 대체됨 ) 후에 해결하고 글을 쓰려고 한다.