[Spring Boot 게시판] 31일차

김정현·2022년 11월 8일
0

SPRINGBOOT게시판

목록 보기
31/36

article write, modify, detail에 토스트 UI 적용

  • <%@ include file="../common/toastUiEditorLib.jspf" %> : 토스트ui 관련코드를 jspf파일로 작성하여 include하여 사용

토스트ui로 내용 작성

		const editor = $(form).find('.toast-ui-editor').data(
				'data-toast-editor');
		const markdown = editor.getMarkdown().trim();
		
		if (markdown.length == 0) {
			alert('내용을 입력해주세요');
			editor.focus();
			return;
		}
		form.body.value = markdown;
		form.submit();
	
  • 기존에는 textarea를 통해 내용을 작성하였으나 토스트ui를 적용

  • 토스트ui 에디터에 작성된 내용을 마크다운으로(editor.getMarkdown()) 가져옴

  • 마크다운으로 가져온 내용의 길이가 0이라면 return

  • <form class="table-box-type-1" method="post" action="doModify" onsubmit="ArticleModify__submit(this); return false">
    				<input type="hidden" name="id" value="${article.id }"/>
    				<input type="hidden" name="body" />
  • 폼태그로 데이터를 전달시 게시글의 내용을 토스트ui에 작성하였으므로 작성된 내용의 값을 전송하기위해

  • <input type="hidden" name="body" />를 추가하고

  • form.body.value = markdown; 로 토스트ui의 작성된 내용을 input태그 value에 대입

detail에는 토스트ui viewer 적용

favicon 적용

0개의 댓글