송민준의 개발노트

썸머노트(summernote) 불러온 데이터 입력 본문

웹/jQuery`

썸머노트(summernote) 불러온 데이터 입력

송민준 2020. 1. 19. 15:04

썸머노트에 데이터를 입력하는 방법은 두가지가 있다.

 

1. 썸머노트가 제공해주는 라이브러리 사용

$('#board_content').summernote('editor.insertText', "${board_data.BOARD_CONTENT}")

만약 DB에서 불러온게 태그가 들어가 있으면 태그도 그대로 출력이 된다.

즉 최초 '테스트' 값을 넣었으면 아래와 같이 나오는 것이다.

<p>테스트</p>

다른 방법으로 아래와 같은 방법이 있다.

$('#board_content').summernote('code', '${board_data.BOARD_CONTENT}');

 

 

2. 값 넣은 후 썸머노트 초기화

그렇다면 사용자가 보기에는 태그가 나오면 안되는데 어떻게 해야할까?

// 서머노트 초기화
	$('#board_content').val("${board_data.BOARD_CONTENT}");
	 $('#board_content').summernote({
		 	placeholder: '최대 500자 작성 가능합니다.',
	        height: 300,
	        lang: 'ko-KR',
	        callbacks: {
	        	onImageUpload: function(files, editor, welEditable) {
	        		for(var i = files.length -1; i>=0; i--) {
	        			sendFile(files[i], this);
	        		}
	        	}
	        }
	 });

위와 같이 값을 먼저 넣어준 후 초기화를 시킨다. 그럼 아래와 같이 입력이 된다.

테스트

 

 

* 혹시나 값들이 개행이 되어 있다면 서버에서 데이터 삽입시 아래와 같이 개행문자를 없애준다.

board.setBOARD_CONTENT(board.getBOARD_CONTENT().replaceAll(System.getProperty("line.separator"), " "));

위에 것도 안되면
.replaceAll("(\r\n|\r|\n|\n\r)", " ")
추가