SpringBoot 게시글 기본 업로드 VS TOAST UI Editor 로 업로드

배울내용:

SpringBoot 게시글 기본 업로드

TOAST UI Editor 로 업로드

SpringBoot 게시글

SpringBoot 새 글쓰기

스프링부트 새 글쓰기

스프링부트 게시글

토스트 UI 에디터 사용법

 

 

 

 

 

 

 

전체 코드는 아래의 깃헙 주소에서 확인가능하다 

https://github.com/angrybird24/SpringBoot_Projects

 

 

 새글쓰는 코드이다 여기서 가장 눈여겨 봐야 할 부분은 제목과 내용을 넣는 부분이다 

<div className="container mt-5">
    <div className="row">
        <div className="col-lg-8">
            <article>
                <!-- 아이디 정보 저장 -->
                <input type="hidden" id="article-id" th:value="${diary.id}"/>

                <header className="mb-4">
                    <input type="text" className="form-control" placeholder="제목" id="title" th:value="${diary.title}"/>
                </header>
                <input type="date" className="form-control mt-2" placeholder="날짜" id="start" th:value="${diary.start}"/>


                <section className="mb-5">
                    <textarea className="form-control h-25" rows="10" placeholder="내용" id="content"
                              th:text="${diary.content}"></textarea>
                </section>
                <!-- id가 있을 때는 [수정] 버튼을, 없을 때는 [등록] 버튼이 보이게 함 -->
                <button th:if="${diary.id} != null" type="button" id="modify-btn"
                        className="btn btn-primary btn-sm">수정
                </button>
                <button th:if="${diary.id} == null" type="button" id="create-btn"
                        className="btn btn-primary btn-sm">등록
                </button>
            </article>
        </div>
    </div>
</div>

 

 

 

아래의 부분이 기존에 방식으로 하는것이고 

<header className="mb-4">
    <input type="text" className="form-control" placeholder="제목" id="title" th:value="${diary.title}"/>
</header> 

<section className="mb-5">
    <textarea className="form-control h-25" rows="10" placeholder="내용" id="content"
              th:text="${diary.content}"></textarea>
</section>

 

 

 

새로만드는 페이지에 아래의 TOAST UI Editor 를 넣어준다 

 

<h2 style="text-align: center;">TOAST UI Editor 글쓰기 페이지</h2>
<div id="content21">

</div>
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<script>
    const editor = new toastui.Editor({
        el: document.querySelector('#content21'), // 에디터를 적용할 요소 (컨테이너)
        height: '500px',                        // 에디터 영역의 높이 값 (OOOpx || auto)
        initialEditType: 'markdown',            // 최초로 보여줄 에디터 타입 (markdown || wysiwyg)
        initialValue: '',                       // 내용의 초기 값으로, 반드시 마크다운 문자열 형태여야 함
        previewStyle: 'vertical',               // 마크다운 프리뷰 스타일 (tab || vertical)
        placeholder: '내용을 입력해 주세요.',
    });
</script>

 

 

그리고 기존에 썼던 Content는 지워준다

<!--<section class="mb-5">
    <textarea class="form-control h-25" rows="10" placeholder="내용" id="content21" th:text="${diary.content}"></textarea>
</section>-->

 

 

 

그리고 Diary.js  파일에 가서 content: 부분에 

 document.getElementById('title').value,

 

이런식 대신

 

editor.getHTML(),

 

이런식으로 쓰면 끝이다 

if (createButton) {
    // 등록 버튼을 클릭하면 /api/diaries 요청을 보낸다
    createButton.addEventListener('click', event => {
        body = JSON.stringify({
            title: document.getElementById('title').value,
            content: editor.getHTML(),
        });

 

 

 

 

 

보이는건 아래처럼 보인다 

 

 

그리고 Editor에 있는 기능중 굵은글씨, 이탈릭 글씨체, 1,2,3,4 ol ul 같은 기능들을 넣고 등록을 눌러주면

다른 코드는 변함없이 

아래처럼 등록이 된다