토스트 UI 를 웹페이지에 추가했다면 에디터 객체의 getHTML 메서드를 이용하여 에디터의 내용을 html 로 불러올 수 있다. html 내용을 불러온다는 것은 곧 DB 에 저장하기 위함도 있지만 화면상에서 편집을 위한 목적일 수도 있고, 작성한 내용을 미리보기하여 내용을 확인하기 위함도 있다.
TOAST UI / 토스트 ui 에디터 html 가져오기
getHTML 메서드 사용하기
토스트 UI 에디터 ( TOAST UI Editor )를 웹페이지에 붙였다면 에디터에서 작성한 콘텐츠성 글들을 html 로 가져올 필요가 있다.
에디터에서 기록된 콘텐츠를 html 로 가져오기 위해 getHTML 메서드를 사용하며, 가져온 html 콘텐츠는 DB에 저장하여 사용할 수 있다.
getHTML 메서드는 에디터 생성시 사용한 에디터 객체를 이용한다.
토스트 UI 에디터를 웹페이지에 생성하는 방법은 아래의 포스팅을 참고해 본다.
TOAST UI / 토스트 ui 에디터 붙이기 네이버 CDN 사용
토스트 UI 에디터 ( TOAST UI Editor )는 네이버 블로그의 에디터와 비슷한 형태를 가지고 있어 사용자에게 익숙하다. CDN 을 통해 외부 스크립트를 이용하여 html 태그에 추가하는 방식이기에 자유롭게
lngnat.tistory.com
getHTML 메서드
토스트 UI 에디터 ( TOAST UI Editor ) 를 사용하려면 먼저 에디터 객체를 생성한다.
에디터 객체를 사용한 후 getHTML 메서드를 사용하여 에디터에 작성한 글내용을 HTML 형식으로 불러올 수 있다.
아래는 이와 같은 작업을 위한 자바스크립트 코드이다.
<!-- TOAST UI Editor CDN -->
<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>
<!-- TOAST UI Editor -->
<script>
/** 에디터 객체생성 */
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
});
/** 에디터의 작성된 HTML 출력 */
console.log(editor.setHTML(vHtml));
</script>토스트 UI 에디터를 생성하면서 initialValue 에 초기값으로 html 문장을 설정해 주었다.
에디터가 생성된 후 console.log 메서드를 통해 에디터의 html 이 잘 나오는지 확인해 볼 수 있다.
위의 코드에 대한 실행결과는 다음과 같다.
F12 개발자모드의 Console 화면에서 에디터의 내용이 출력되는 것을 확인할 수 있다.
getHTML 버튼 만들기
이제는 버튼을 만들어 토스트 UI 에디터 ( TOAST UI Editor ) 에서 수정한 글내용을 html 로 가져오는 함수를 만들어 본다.
에디터의 글내용을 html 로 가져오는 메서드는 getHTML 메서드를 사용한다.
버튼 형태의 input 태그에 html 불러오기를 위한 클릭 이벤트를 연결하여 F12 개발자모드에서 html을 출력하도록 한다.
<!-- 에디터 내용 html 가져오기 -->
<script>
document.getElementById('editorGetHtml').addEventListener('click', () => {
console.log( editor.getHTML() );
});
</script>
<!-- 에디터 내용 html 가져오기 -->
<div>
<input type="button" id="editorGetHtml" value="HTML보기">
</div>버튼을 하나 만들었고 클릭 이벤트를 연결하여 에디터에 작성된 html 내용을 가져오도록 하였다.
에디터에 초기값으로 설정된 내용을 변경하고 추가하였으며 getHTML 메서드를 사용하여 F12 개발자모드에서 출력할 수 있도록 하였다.
결과는 잘 나오고 있다.
전체코드 보기
위의 내용에 대한 전체 코드를 살펴본다.
버튼을 클릭했을 때 에디터의 내용을 html 로 불러오는 부분에 대한 전체 코드이다.
에디터를 생성하고 초기값을 설정한 후 에디터의 내용을 변경한 후 버튼을 클릭하면 에디터에 기록된 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>
</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>
$(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
});
console.log(editor.getHTML());
document.getElementById('editorGetHtml').addEventListener('click', () => {
console.log( editor.getHTML() );
});
});
</script>
<div class="contents">
<div id="editor"></div>
</div>
<div>
<input type="button" id="editorGetHtml" value="HTML보기">
</div>
<hr/>
<div class="footer">저작권 소유자</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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' 카테고리의 다른 글
| TOAST UI Editor / 토스트 ui 에디터 html 설정하기 setHTML 메서드 사용하기 (0) | 2022.11.29 |
|---|---|
| html 태그 요소를 자바스크립트 함수 파라미터로 사용하기 함수의 인자값으로 사용하기 (0) | 2022.11.28 |
| TOAST UI / 토스트 ui 에디터 붙이기 네이버 CDN 사용 (0) | 2022.11.27 |
| 네이버 토스트 UI 종류 홈페이지 제작 웹개발에 필요한 오픈 소스 프로젝트 (0) | 2022.11.27 |
| 자바스크립트 문자열 복사 하기 javascript clipboard (0) | 2022.11.25 |
댓글