오늘 할 이야기는 텍스트 편집기와 관련된 일입니다.
서머노트라는 텍스트 편집기를 이용하였는데 이 편집기를 사용해 어떻게 정보를 백엔드에 쏴주고 어떻게 다시 불러올 수 있는지를 보겠습니다.
서머노트를 사용하면 아래 이미지와 같은 글을 작성하는 창이 생기는데 저 아이콘들은 사용자가 어떤 기능을 배치하느냐에 따라 달라집니다.
<script>
$('#summernote').summernote({
placeholder: '글 내용을 입력하세요',
tabsize: 2,
height: 500,
focus: true,
lang: "ko-KR",
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']]
],
});
</script>서머노트 사진의 기능들은 위와 같은 JS코드로 추가, 삭제 할 수 있습니다.
그리고 서머노트에서 글을 작성하면 어떻게 저장이 되는 걸까요?
정답은 html형식으로 저장되는 것입니다.
줄바꿈이 일어날때마다 한줄 한줄은 p태그로 묶이고 사진또한 p태그에 들어가게 됩니다.
잠깐 제가 만든 코드를 보면
const title = document.getElementById('article_title').value;
const category = document.getElementById('category').value;
const image = document.getElementById('myFile').files[0];
const content = $('#summernote').summernote('code');일반적인 경우에서는 제목, 카테고리, 이미지 처럼 getElementById나 쿼리 셀렉터를 이용하게 되는데 서머노트에서 해당 기능을 이용하면 너무나도 많은 정보가 담겨서 정작 담고자 하는 본문의 내용을 담지못하게 됩니다.
그래서 서머노트의 html태그를 담아오기 위해 const content = $('#summernote').summernote('code'); 이 코드가 필요하고 이러면 content라는 변수에 서머노트로 작성한 본문이 html형식으로 저장됩니다.
그리고 백엔드에 데이터를 보내주고 이 게시글을 보기위해 백엔드에 데이터를 요청할 때, html 형식이 넘어오기 때문에 이를 그대로 받으면 게시글을 볼 때, html코드를 보게됩니다.. 본문을 자유롭게 보기위해 innerHTML기능을 이용해 작성한 글을 볼 때 원하고자 했던 글을 볼 수 있게 되었습니다.
article_content.innerHTML = response_json.content
