썸머노트 위지윅 에디터 html 가져오기

썸모노트 ( summernote ) 위지윅 에디터에서 작성된 글내용을 html 로 가져오기 위해 summernote() 메서드를 사용하고 인자값으로 code 를 사용하면 된다.

썸머노트 위지윅 에디터 html 가져오기

웹개발시 위지윅 에디터를 추가할 때 가장 많이 사용되는 것은 에디터에 html 을 설정하고 가져오는 것이다.

위지윅 에디터은 작성한 글들이 html 로 존재하는데 이를 DB에 저장하고 불러올 수 있다.

DB에 저장하기 위해 위지윅 에디터에 작성된 글의 내용과 이미지 등을 가져올 필요가 있다.

여기서는 썸머노트 ( summernote ) 를 기준으로 설명한다.

결론적으로 썸머노트 위지윅 에디터에서 작성한 글의 내용을 가져오기 위한 메서드는 다음과 같다.

(썸머노트_객체).summernote("code");

썸머노트 설치

썸머노트 ( summernote ) 위지윅 에디터를 웹페이지에 추가하는 어렵지 않다.

홈페이지를 방문하고, 라이브러리를 다운로드하고 썸머노트 위지윅 에디터 객체를 만들어 주면 그만이다.

개발자의 몫이 있다면 플러그인을 사용하여 사용자가 원하는 것을 할 수 있도록 해 주는 것과 에디터에서 작성한 내용을 html 로 불러와 db 에 저장하고 설정하면 되는 것이다.

아래의 내용은 썸머노트 위지윅 에디터를 설치하는 내용이다.

썸머노트 위지윅 에디터 설치하기 summernote wysiwyg editor

토스트 UI 에디터의 자잘한 버그로 썸머노트 위지윅 에디터로 대체하는 작업이 필요했다. 위지윅 에디터의 개인적 테스트는 토스트 UI 에디터보다 만족스러웠다. 단순해 보이지만 전문가적인 면

lngnat.tistory.com

html 가져오기

썸머노트 ( summernote ) 위지윅 에디터에서 작성한 글의 내용을 html 로 가져오기 위해선 summernote 메서드와 인자값을 주면 된다.

아래는 html 을 가져오기 위한 메서드의 사용방법이다.

(썸머노트_객체).summernote("code");

썸머노트를 사용하기 위한 객체를 만들어 주었다면 위와 같은 방법으로 html 를 가져올 수 있다.

서버로 html 을 보내기 위한 것은 다른 문제다.

전체코드 및 결과화면

아래는 전체코드이다.

썸머노트 ( summernote ) 위지윅 에디터에 작성된 글을 가져오기 위한 메서드를 사용했고, 버튼을 이용하여 에디터에 작성된 글내용을 html 로 잘 가져오는지 개발자모드에서 확인하도록 하였다.

summernote('code'); 메서드를 사용하면 썸머노트에 작성된 글내용을 html로 가져오기 할 수 있다.

다음은 전체 코드이다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>썸머노트</title>
	<style>
	</style>
	<!-- include libraries(jQuery, bootstrap) -->
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	
	<!-- include summernote css/js -->
	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <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-lite.min.js"></script>
</head>
<body>
	<div id="container">
		<script>
			$(document).ready(function() {
				$('#summernote').summernote({
					lang: 'ko-KR',
					placeholder: 'Hello stand alone ui',
					tabsize: 2,
					height: 300,
					toolbar: [
						['style', ['style']],
						['font', ['bold', 'underline', 'clear']],
						['color', ['color']],
						['para', ['ul', 'ol', 'paragraph']],
						['table', ['table']],
						['insert', ['link', 'picture', 'video']],
						['view', ['fullscreen', 'codeview', 'help']]
					]
				});

				$("#operGetHtml").click(function(){
					var markupStr = $('#summernote').summernote('code');
					console.log(markupStr);
				});
			});
		</script>
		<div>
			<input type="button" id="operGetHtml" value="Get"/>
		</div>
		<div>
			<div id="summernote"></div>
		</div>
	</div>
</body>
</html>

썸머노트를 html 파일에 추가했고, Get 버튼을 만들어 html 내용을 가져오도록 하였다.

html 내용을 확인하기 위해 console.log 메서드를 사용했으면 버튼 클릭 후 html 형태로 잘 넘어오는 것을 확인할 수 있다.

저작자표시 비영리 변경금지

'programming > TroubleShootInG' 카테고리의 다른 글

UX UI 뜻과 차이 사용자 중심의 기능성 디자인 (0)	2022.12.18
썸머노트 위지윅 에디터 html 설정하기 (0)	2022.12.14
썸머노트 위지윅 에디터 설치하기 summernote wysiwyg editor (0)	2022.12.06
자바스크립트 동기 비동기 동작 방식 이해 (0)	2022.12.05
html 입력 태그 전체 선택 ctrl + a 기능 만들기 input textarea 태그 한정 (0)	2022.12.02

썸머노트 위지윅 에디터 html 가져오기