TOAST UI Editor 추가
Test
테스트용 토스트 UI를 추가하여 잘 적용되는지 확인하기.
TOAST UI Editor Link : https://ui.toast.com/tui-editor
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Video Detail</title>
<!-- CSS for TOAST UI Editor -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css" />
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor.css" />
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor-contents.css" />
</head>
<body>
<h1 th:text="${video.title}"></h1>
<a th:href="${video.videoUrl}" th:text="${video.videoUrl}"></a>
<!-- 기능 버튼 -->
<div>
<button>커리큘럼</button>
<button>커뮤니티(QnA)</button>
<button>노트</button>
</div>
<h4>Curriculum Videos</h4>
<ul>
<li th:each="curriculumVideo : ${video.lecture.lectureVideoList}">
<a th:href="@{/lectures/{lectureId}/videos/{videoId}(lectureId=${video.lecture.lectureId}, videoId=${curriculumVideo.lectureVideoId})}" th:text="${curriculumVideo.title}"></a>
</li>
</ul>
<!-- TOAST UI Editor container -->
<div id="toast-editor"></div>
<!-- Save Note Button -->
<button id="save-note">노트입력</button>
<!-- List of saved notes -->
<ul id="notes-list"></ul>
<!-- JS Dependencies for TOAST UI Editor -->
<script src="https://uicdn.toast.com/tui-editor/latest/tui-editor-Editor-full.js"></script>
<script>
const editor = new tui.Editor({
el: document.querySelector('#toast-editor'),
initialEditType: 'markdown',
previewStyle: 'vertical',
height: '400px'
});
// Store saved notes in an array
const savedNotes = [];
document.querySelector("#save-note").addEventListener("click", function() {
// Get content from the editor
const noteContent = editor.getMarkdown();
// Add content to the saved notes array
savedNotes.push(noteContent);
// Update the notes list
const notesList = document.querySelector("#notes-list");
notesList.innerHTML = ""; // Clear the existing list
savedNotes.forEach(note => {
const listItem = document.createElement("li");
listItem.textContent = note;
notesList.appendChild(listItem);
});
});
</script>
</body>
</html>실행 결과 페이지
마크다운 입력 후 저장 -> 리스트 확인 결과
잘 나온다. 다만 수정해야 할 부분이 아직 많다.
- 백엔드 연결
: 아직 프론트 단계에서만 보이는 상태이며 DB에 저장 안된 상태. - 이미지 링크가 긴 경우
: 해당 이미지에서 보이듯 이미지 링크가 긴 경우 페이지보다 길어 가로 스크롤바 생성됨.
수정 할 부분이 많지만 페이지에 적용 한 것 자체가 기분이 좋다.
g2jkj0274@gmail.com