코딩항해기
[API] CKEditor5 간단하게 살펴보기 (클래식, 기본기능) 본문
[API] CKEditor5 샘플 코드 다운로드하기
CKEditor 5 BuilderCreate and customize your online editor with CKEditor 5 Builder. Choose features, set up your editor, and see changes in real-time.ckeditor.com CKEditor5는 홈페이지에서 다양한 구성에 따라 샘플코드를 제공하고 있
minibcake.tistory.com
main.js에 들어가면 에디터 설정을 할 수 있는 부분이 있다.
const editorConfig = {
toolbar: {/*툴바 설정 부분*/
items: ['undo', 'redo', '|', 'bold', 'italic', '|', 'link'],/*이 순서대로 툴바에 뜬다 |는 구분값*/
shouldNotGroupWhenFull: false
},
plugins: [AccessibilityHelp, AutoLink, Autosave, Bold, Essentials, Italic, Link, Paragraph, SelectAll, Undo],
initialData: '에디터가 만들어질 때 값으로 들어가는 부분, input태그의 value같은 부분이다.',
language: 'ko', /*언어 설정*/
link: { /*링크 관련 설정*/
addTargetToExternalLinks: true,
defaultProtocol: 'https://',
decorators: {
toggleDownloadable: {
mode: 'manual',
label: 'Downloadable',
attributes: {
download: 'file'
}
}
}
},
placeholder: '플레이스홀더 input 태그의 placeholder 설정 부분이다.',
translations: [translations]
};
설정 부분을 편집하면 플레이스 홀더나 언어, 툴바 기능, 순서 등등을 설정할 수 있다.
그리고 initialData 부분은 에디터가 생성될 때 작성 값으로 바로 들어가는 부분을 설정할 수 있는 부분인데,
만약 update라면 기존 글의 내용을 보여줄 필요가 있으므로, 이 위치에 데이터를 DB에서 받아와 띄워줄 때 사용할 수 있다.
ajax를 통해서 값을 받아와 넣는 방식 등을 활용할 수 있을 것 같다.
let content = "";
$.ajax({
url: 'updateBoard',
type: 'POST',
data: {
requestUrl: location.href.split('?', 2)[1]
},
dataType: 'JSON',
success: (data) => {
if (data) {
//받아온 데이터를 컨텐츠에 저장한다.
content = data.content;
}
else {
//업데이트가 아니라면 insert이므로 따로 기본 데이터를 설정할 필요 없다.
console.log("insert");
}
},
error: (error) => {
content = '에러발생';
console.log("error" + error);
},
complete: () => {
//ajax 실행을 완료하면 해당 내용을 실행한다.
console.log("컨텐츠" + content);
//에디터를 만든다.
ClassicEditor.create(document.querySelector('#editor'), editorConfig)
}
});
해당 코드에서는 GET방식으로 올 boardNum 번호를 함께 Controller로 보내주기 위해 물음표를 기준으로 잘라 뒷 부분을 보내고 있다. 그럼 Controller는 업데이트가 아니라면 null을 보내 content의 초기 값인 빈값을 유지해 띄워주지 않고, 업데이트라면 데이터를 보내 content에 해당 데이터를 넣어준 다음 에디터를 만들어 주는 방식이다.
에러발생 시에는 시각적으로 확인하기 위해 content에 에러발생이라는 텍스트를 넣어주고 있다.
이 때 create하며 호출하는 function이 아까 설정을 만져준 함수이고, querySelector로 선택해주는 부분이 html에서 에디터가 들어가는 div 또는 textarea이다.
기본이 div로 되어있는데 form태그에 넣어 같이 전송하려면 textarea로 변경해주면 된다.
여기서 id값이 변경된다면 create부분의 querySelector부분도 맞춰줘야한다.
<textarea id="editor"></textarea><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 Sample</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./ckeditor5/ckeditor5.css">
<!--제이쿼리-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form action="writeBoard" method="POST">
<div>
<div class="main-container">
<input type='text' name='title' placeholder='제목을 입력하세요.'>
<div class="editor-container editor-container_classic-editor" id="editor-container">
<div class="editor-container__editor">
<!--이 textarea태그 #editor가 에디터가 된다-->
<textarea id="editor"></textarea>
</div>
</div>
<button type='button' id='save'>작성완료</button>
</div>
</div>
</form>
<script type="importmap">
{
"imports": {
"ckeditor5": "./ckeditor5/ckeditor5.js",
"ckeditor5/": "./ckeditor5/"
}
}
</script>
<script type="module" src="./main.js"></script>
</body>
</html>
이 상태로 실행해보면 기본 높이 설정이 없어서 컨텐츠 크기대로 창 높이가 결정되어있는 것을 확인할 수 있는데,
높이를 별도로 설정해주고싶다면 css를 편집해야한다. 종류에 따라 상단의 에디터 설정하는 부분에서 높이를 지정해주기도 하는데, 지금 사용 중인 에디터의 경우 css에서 지정해줘야한다.
해당 class name은 개발자도구를 통해 알아냈다.
.ck-content{
min-height: 500px;
}
CKEditor에 내용이 입력될 때마다 입력값이 어떻게 들어가있는지 확인하고 싶다면 change:data를 사용할 수 있다.
// 에디터 내용 변경 이벤트 핸들링
editor.model.document.on('change:data', () => {
console.log('에디터 내용이 변경되었습니다.');
console.log("에디터 내용 : " + editor.getData());
});
이 때 editor는 매개변수로 받아온 값인데, 에디터 인스턴스이다. 에디터 인스턴스에서 .getData()를 통해 현재 입력되어있는 값을 알 수 있다. (= .val())
아까 ajax의 complete에서 create가 있었기 때문에 해당 complete코드만 가져와봤다.
complete: () => {
console.log("컨텐츠" + content);
ClassicEditor.create(document.querySelector('#editor'), editorConfig)
.then(editor => {
console.log("에디터 내용 : " + editor.getData());
editorInstance = editor; // 에디터 인스턴스 저장
// 에디터 내용 변경 이벤트 핸들링
editor.model.document.on('change:data', () => {
console.log('에디터 내용이 변경되었습니다.');
console.log("에디터 내용 : " + editor.getData());
});
})
.catch(error => {
console.error('There was a problem initializing the editor:', error);
});
}
에디터 인스턴스를 저장해서 따로 빼서 사용하면 Data를 활용할 수 있다.
'기타 > API' 카테고리의 다른 글
| [API] CKEditor5 샘플 코드 다운로드하기 (0) | 2024.09.13 |
|---|---|
| [API] 네이버 로그인 api NaverLogin (1) | 2024.09.11 |
| [API] 카카오 지도 api KakaoMap (0) | 2024.09.11 |
| [API] 구글 로그인 API (구글 OAuth 2.0 웹 로그인) (0) | 2024.09.11 |
| [API] JAVA - 동적크롤링 (셀레니움4 Selenium +WebDriverManager) (5) | 2024.09.02 |
