프론트에서 ckeditor로 글 작성
먼저 ckeditor를 소스로 받아와야합니다.
<!DOCTYPE html>
<html>
<head>
<title>게시글 작성</title>
<script src="https://cdn.ckeditor.com/ckeditor5/29.0.0/classic/ckeditor.js"></script>
</head>그 뒤에 body안에 사용자가 입력할 정보를 담을 곳을 만들어 줬습니다.
<form id="articleForm">
<div>
<label for="title">제목:</label>
<input type="text" id="title" name="title" required>
</div>
<div>
<label for="image">이미지:</label>
<input type="file" id="image" name="image">
</div>
<div>
<label for="content">내용:</label>
<div id="editor">
</div>
</div>
<button id="save-button">작성</button>
</form>그 다음으로 텍스트에디터를 프론트로 가져오는 자바스크립트 코드를 작성했습니다.
const token = "Bearer <'토큰값'>
let editorInstance;
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => {
editorInstance = editor;
})
.catch(error => {
console.error(error);
});
document.getElementById('save-button').addEventListener('click', function () {
const editorData = editorInstance.getData();
createArticle(editorData)
})아까 src로 가져온 ckeditor.js에서 ClassicEditor를 가져와 querySelector로 editor를 id로 갖는 태그를 목적지로 삼고 ClassicEditor에 create를 사용했습니다.
그리고 위에서 선언했던 editorInstance에 editor의 내용을 담고 save-button이라는 이름의 버튼이 클릭되었을 때, createArticle함수 안에 editorInstance의 데이터를 할당한 editorData를 넣어 주었습니다.
프론트에 있는 텍스트에디터로 작성한 글을 백엔드로 보내주는 함수입니다.
async function createArticle(editorData) {
// 게시글 작성 폼에서 입력된 데이터 수집
const title = document.getElementById('title').value;
const content = editorData;
const image = document.getElementById('image').files[0];
// FormData 객체 생성 및 데이터 추가
const formData = new FormData();
formData.append('title', title);
formData.append('content', content);
formData.append('image', image);
try {
// POST 요청 보내기
const response = await fetch('http://127.0.0.1:8000/articles/', {
method: 'POST',
body: formData,
headers: {
'Authorization': `${token}`
},
});
// 응답 처리
if (response.ok) {
const article = await response.json();
console.log('게시글이 작성되었습니다:', article);
// 게시글 작성 성공 시, 필요한 처리 작업 수행
} else {
console.error('게시글 작성에 실패했습니다:', response.statusText);
// 게시글 작성 실패 시, 필요한 처리 작업 수행
}
} catch (error) {
console.error('게시글 작성 중 오류가 발생했습니다:', error);
// 오류 처리 작업 수행
}
}title과 image는 html에서 받은 정보를 그대로 가져오고, content는 텍스트에디터의 구역이기에 인자로 받은 editorData를 넣어주었습니다.
이후 formdata에 하나씩 추가해주고 백엔드의 주소로 헤더에 토큰값을 담아 보내주었습니다.
이제 막 개발 배우는 코린이