Intro
'도우미'프로젝트에서 퀴즈 작성 CRUD를 하는 역할을 맡게 됐다.
퀴즈 작성 게시판을 대충 설명하자면 사용자가 퀴즈와 정답을 작성할 수 있는 게시판이다.
우리 웹 사이트의 사용자들을 개발자들로 정했기 때문에 퀴즈는 거의 코딩관련 문제일 것이다.
만약 코드에 대한 퀴즈를 낼 때 벨로그처럼 마크다운으로 코드 블럭이나 사진 같은 것을 넣을 수 있으면 보기 좋을 것 같았다.
알아보니 마크다운, 사진 첨부 가능한 toast api란 것이 있었다.
https://ui.toast.com/tui-editor
Editor 적용하기
TOAST UI Editor(이하 'TUI 에디터')는 NHN Cloud에서 개발한 오픈 소스 라이브러리로, 마크다운과 위지윅 방식 모두를 지원하는 무료 에디터다.
- 적용하고 싶은 html에 js와 css소스코드를 불러온다.
css
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css"/>html
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script><body>에<div>태그 선언하기
TUI<div>태그에 에디터가 생성되기 때문에 div태그가 필요하다.
<div class="quiz-content"></div>- 인스턴스 생성하기
const contentEditor = new toastui.Editor({
el: document.querySelector('.quiz-content'),
height: '700px',
initialEditType: 'markdown',
initialValue: quizContent,
previewStyle: 'vertical'
placeholder: '퀴즈 문제를 내주세요.',
});el:에디터를 적용할 요소 (컨테이너)
height: 에디터 영역의 높이 값
initialEditType: 최초로 보여줄 에디터 타입 (markdown || wysiwyg)
initialValue: 내용의 초기 값으로, 반드시 마크다운 문자열 형태여야 함
previewStyle: 마크다운 프리뷰 스타일 (tab || vertical)
여기서 보통 다른 사람들은 html에 바로 script로 인스턴스를 생성한다.
하지만 그렇게되면 지저분하니까 나는 따로 파일을 빼줬다.
그렇게 되면 initialValue에 넣을 content값을 타임리프를 이용해서 가져와야된다. (사용자가 입력한 값들)
생성 폼의 경우 아무 내용도 없어야 하니 ""로 설정한다.
<script th:inline="javascript">
let quizContent="";
let answerContent="";
</script>
//toastApi 인스턴스 생성 파일
<script th:src="@{/Js/quiz/toastApi.js}"></script> 수정 폼의 경우 사용자가 입력한 내용을 문자열로 보여줘야하니, script태그를 이용해서 th:inline 속성을 부여하고 타임리프 문법으로 문자열에 해당하는 value들을 가져왔다.
<script th:inline="javascript">
let quizContent=[[${quiz.contents}]];
let answerContent=[[${quiz.answer}]];
</script>
<script th:src="@{/Js/quiz/toastApi.js}"></script> 이렇게 적용하면 잘 돌아가는 것을 확인할 수 있다.
생성 폼의 경우
수정 폼의 경우
Viewer적용하기
마크다운으로 작성한 내용들을 보여주는 기능도 필요하다.
그냥 보여주게되면 마크다운이 적용 안 된 text형식으로 보여주기 때문
- 사용하고 싶은 html에 css, js 불러오기
css
<link rel="stylesheet" href="https://uicdn.toast.com/editor/3.0.2/toastui-editor.min.css">javascript
<script src="https://uicdn.toast.com/editor/3.0.2/toastui-editor-all.min.js"></script>- 인스턴스 생성하기
$(document).ready(function () {
const content = toastui.Editor.factory({
el: document.querySelector(".content-detail"),
viewer: true,
useScript: true,
initialValue: quizContent,
});
const answer = toastui.Editor.factory({
el: document.querySelector(".content-answer"),
viewer: true,
useScript: true,
initialValue: answerContent,
});
}
);el:에디터를 적용할 요소 (컨테이너)
initialValue에 들어갈 값들은 html에서 가져왔다.
<script th:inline="javascript">
let quizContent=[[${quiz.contents}]];
let answerContent=[[${quiz.answer}]];
</script>적용하면 잘 되는 것을 확인 할 수 있다.
