<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>boardwrite.html</title>
<link href="css/mystyle1.css" rel="stylesheet">
<style>
.ck-editor__editable_inline {
min-height: 400px;
}
</style>
</head>
<body>
<div class="container">
<div class="mydiv1">
<div>
<label class="lbl1">제목</label>
<input type="text" placeholder="제목입력" id="title"/>
</div>
</div>
<div class="mydiv1">
<div>
<label class="lbl1">내용</label>
<div style="display: inline-block; width: 500px;"></div>
<textarea placeholder="내용입력" id="content" style="display: none;"></textarea>
</div>
</div>
<div class="mydiv1">
<div>
<label class="lbl1">작성자</label>
<input type="text" placeholder="작성자" id="writer" />
</div>
</div>
<div class="mydiv1">
<div>
<label class="lbl1"></label>
<input type="button" value="글쓰기" id="btn1" />
<a href=board.html><input type="button" value="게시판목록" /></a>
</div>
</div>
</div>
<script src="js/ckeditor.js"></script>
<script>
// textarea 태그 찾기
const cont = document.getElementById('content');
// const cont = document.qureySelector('#content'); 와 같음
// 변경된 textarea -> editor로 변경
var editor;
ClassicEditor.create(cont).then(function(edt){
editor = edt;
});
btn1.addEventListener('click', function() {
const title = document.getElementById('title');
const content = editor.getData();
const writer = document.getElementById('writer'); // document.getElementById('writer').value; 하면
if (title.value === "") { // if (title === "") 가능
alert('제목을 입력하세요');
title.focus();
return false;
}
if(content === "") {
alert('내용을 입력하세요')
editor.editing.view.focus();
return false;
}
if (writer.value === "") {
alert('작성자를 입력하세요');
writer.focus();
return false;
}
console.log('유효성 검사 통과 후 백엔드로 데이터 전송시점')
});
</script>
</body>
</html>
20211208-