TOAST UI Editor / 토스트 ui 에디터 html 설정하기 setHTML 메서드 사용하기

토스트 UI 에디터 ( TOAST UI Editor )은 setHTML 메서드를 이용하여 에디터에 html 문자열을 설정할 수 있다. 양식이 필요한 경우들에 사용할 수 있고, 버튼을 이용하여 기능을 추가할 수 있다. 업무용 프로그램이나 블로그 같은 콘텐츠성 글양식에 자주 사용될 수 있다.

TOAST UI Editor / 토스트 ui 에디터 html 설정하기
setHTML 메서드 사용하기

모든 에디터가 그렇듯 사용자가 처음부터 글을 작성하려고 하면 어렵다. 잘 아는 분야라 하더라도 어떻게 작성해야 할지 모른다.

업무용도의 웹페이지에서 에디터는 양식을 불러와 사용할 수 있으며, 양식은 에디터가 나타나면서 화면에 나타난다.

토스트 UI 에디터 ( TOAST UI Editor ) 는 이런 문서양식을 html 형식으로 지정하여 에디터가 처음 나타날 때 사용자에게 보여줄 수 있다.

이 때 사용하는 메서드는 setHTML() 이다.

에디터에서 html 불러오기를 위한 getHTML 메서드에 대한 내용은 이전 포스팅을 참고해 본다.

TOAST UI Editor / 토스트 ui 에디터 html 가져오기 getHTML 메서드 사용하기

토스트 UI 를 웹페이지에 추가했다면 에디터 객체의 getHTML 메서드를 이용하여 에디터의 내용을 html 로 불러올 수 있다. html 내용을 불러온다는 것은 곧 DB 에 저장하기 위함도 있지만 화면상에서

lngnat.tistory.com

setHTML() 메서드

setHTML 메서드는 토스트 UI 에디터 ( TOAST UI Editor ) 에 html 문자열을 설정하는 역할을 한다.

업무용으로 사용하는 양식을 불러와 에디터에 설정하고 글을 작성할 수 있다.

테이블과 같은 양식이 될 수도 있고 블로그와 같은 콘텐츠 양식이 될 수도 있으며 일기 형식의 문장이 될 수도 있다.

setHTML 메서드를 사용하기 위해선 먼저 에디터를 설정한 후 html 문자열을 파라미터로 전달하면 된다.

아래는 setHTML 메서드를 사용하는 코드이다.

<!-- Toast UI Editor -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<script>
	/** Load Comp. with resources */
	$(window).on('load', function() {
    
		/** 에디터 생성 */
		const Editor = toastui.Editor;
		const editor = new Editor({
			el: document.querySelector('#editor'),
			height: '500px',
			initialEditType: 'wysiwyg',
			previewStyle: 'vertical',
			usageStatistics: false
		});
        
		/** html 문자열 생성 */
		var vDocu = "";
		vDocu += "<h2>제목</h2>";
		vDocu += "<p>내용</p>";
		
		/** 에디터에 html 문자열 설정 */
		editor.setHTML( vDocu );
    });
</script>

위의 코드에 대한 결과는 다음과 같다.

웹페이지가 나타나면서 토스트 UI 에디터가 화면에 나타난다.

에디터 객체가 생성되면 setHTML 메서드를 이용하여 html 문자열을 에디터에 설정한다.

최종적으로 에디터에 글양식이 나타난다.

setHTML 버튼 만들기

토스트 UI 에디터 ( TOAST UI Editor )이 나타나면서 처음부터 설정된 글양식이 나타나는 것도 좋겠지만, 사용자가 임의로 설정한 글양식을 에디터에 표현하여 사용하고 싶을 수도 있다.

이 경우 버튼을 사용하여 다른 글양식으로 대체할 수 있다.

블로그의 글을 작성하는 효과를 줄 수도 있으며, 업무용 프로그램이라면 보고서별로 양식을 만들어 에디터에 부착하여 사용할 수도 있다.

여기서는 버튼을 만들어 임의의 양식을 설정하도록 한다.

<script>
	var vHtml = "";
	vHtml += "<h2>제목1</h2><p>내용1</p>";
	vHtml += "<h2>제목2</h2><p>내용2</p>";
	vHtml += "<h2>제목3</h2><p>내용3</p>";
	vHtml += "<h2>제목4</h2><p>내용4</p>";
    
    
	/** Load Comp. with resources */
	$(window).on('load', function() {
		document.getElementById('editorSetHtml').addEventListener('click', () => {
			editor.setHTML(vHtml);
		});
	};
</script>

<input type="button" id="editorSetHtml" value="HTML설정">

아래는 결과화면이다.

버튼을 클릭했을 때 다른 양식의 html 이 에디터 화면에 나타나는 것을 볼 수 있다.

전체코드 보기

이제는 전체코드를 보도록 하자.

이전에 작성했던 토스트 UI 에디터 ( TOAST UI Editor ) 에 대한 내용의 연속이다.

이전의 내용은 getHTML 메서드를 이용해 에디터에서 작성한 내용을 html 로 불러오기를 했었고, 이번에는 setHTML 메서드를 이용하여 에디터에 html 문자열을 설정하는 것을 해 보았다.

<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html lang="ko">
	<head>
		<!-- 반응형 meta 명시 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			/** 비영어권 문자열 깨짐 방지 */
			@charset "utf-8";

			/** 모든 여백 제거 */
			* {
				margin: 0;  /* 바깥 여백 */
				padding: 0; /* 안쪽 여백 */
			}
		</style>
		<style>
		</style>
		<!-- jquery cdn -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	</head>
	<body>
		<!-- 디버깅 표시 -->
		<div class="debug">
			<span id="screenW"></span>
			<span id="screenW">X</span>
			<span id="screenH"></span>
		</div>
		<hr/>
		<!-- // -->
		<div class="header">
			<h1>웹사이트 이름</h1>
		</div>
		<hr/>
		<!-- Toast UI Editor -->
  		<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
		<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
		<script>

			var vHtml = "";
			vHtml += "<h2>제목1</h2><p>내용1</p>";
			vHtml += "<h2>제목2</h2><p>내용2</p>";
			vHtml += "<h2>제목3</h2><p>내용3</p>";
			vHtml += "<h2>제목4</h2><p>내용4</p>";
				
			$(window).on('load', function() {
				/* Load Comp. with resources */

				const Editor = toastui.Editor;
				const editor = new Editor({
					el: document.querySelector('#editor'),
					height: '500px',
					initialEditType: 'wysiwyg',
					previewStyle: 'vertical',
					initialValue:'<h2>제목</h2><p>내용</p>',
					usageStatistics: false
				});

				document.getElementById('editorSetHtml').addEventListener('click', () => {
					editor.setHTML(vHtml);
				});

				document.getElementById('editorGetHtml').addEventListener('click', () => {
					document.getElementById('textView').value = editor.getHTML();
					console.log( editor.getHTML() );
				});
			});
		</script>
		<div class="contents">
			<div id="editor"></div>	
		</div>
		<div>
			<input type="button" id="editorSetHtml" value="HTML설정">
			<input type="button" id="editorGetHtml" value="HTML보기">
		</div>
		<hr/>
		<div class="footer">저작권 소유자</div>
	</body>
	<script>
		$(document).ready( function() { /* Load Comp. without resources */ });
		$(window).on('load', function() { /* Load Comp. with resources */ fnBrowserInnerSize(); });
	</script>
	<script>
		/** 웹브라우저 크기 변경 이벤트 */ 
		window.onresize = function() { fnBrowserInnerSize(); };
		/** 웹브라우저의 문서 크기 화면 표시 */ 
		var fnBrowserInnerSize = function() { $("#screenW").text(window.innerWidth); $("#screenH").text(window.innerHeight);};
	</script>
</html>

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

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

html 입력 태그 전체 선택 ctrl + a 기능 만들기 input textarea 태그 한정 (0)	2022.12.02
html 태그 name 선택과 접근 document 객체 jquery 비교 (0)	2022.12.01
html 태그 요소를 자바스크립트 함수 파라미터로 사용하기 함수의 인자값으로 사용하기 (0)	2022.11.28
TOAST UI Editor / 토스트 ui 에디터 html 가져오기 getHTML 메서드 사용하기 (0)	2022.11.28
TOAST UI / 토스트 ui 에디터 붙이기 네이버 CDN 사용 (0)	2022.11.27

TOAST UI Editor / 토스트 ui 에디터 html 설정하기 setHTML 메서드 사용하기