CKEditor5 세팅이 생각보다 간단한 것 같으면서도 내용이 좀 복잡했다.
4버전까지는 내용이 좀 많은 것 같은데
CKEditor5는 필요한 정보는 많이 없고 비슷한 내용이 좀 많았다.
CKEditor5에서 필요한 툴바만 사용하기 위해
불필요한 툴바를 remove 하려고 했는데
방법을 찾다가 너~무 안돼서 직접 필요한 것만 세팅하는 것으로 선택했다.
툴바를 세팅하기 위해 아래 코드에서 볼 수 있는 toolbar를 추가했다.
.create( document.querySelector( '#editor' ), {
<!-- 필요한 toolbar만 setting -->
toolbar: [ 'undo', 'redo', '|', 'heading',
'|', 'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor',
'|', 'bold', 'italic', 'underline', 'strikethrough' ],
이제 깔끔하게 사용하는 툴바만 세팅하여 사용할 수 있게 되었다.
완성된 CKEditor5 모습!
아래는 전체 HTML 코드다.
딱 기본 세팅 코드다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.ckeditor.com/ckeditor5/40.1.0/decoupled-document/ckeditor.js"></script>
<style>
.ck.ck-editor__editable_inline {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Document editor</h1>
<!-- The toolbar will be rendered in this container. -->
<div id="toolbar-container"></div>
<!-- This container will become the editable. -->
<div id="editor">
<p>This is the initial editor content.</p>
</div>
<script>
DecoupledEditor
.create( document.querySelector( '#editor' ), {
<!-- 필요한 toolbar만 setting -->
toolbar: [ 'undo', 'redo', '|', 'heading',
'|', 'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor',
'|', 'bold', 'italic', 'underline', 'strikethrough' ],
<!-- fontSize 세부 setting -->
fontSize: {
options: [
9,
11,
13,
'default',
17,
19,
21
]
},
} )
.then( editor => {
const toolbarContainer = document.querySelector( '#toolbar-container' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element );
newEditor = editor;
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
참고 사이트
ckeditor5 - toolbar 편집하기
ckeditor5 toolbar 편집하는 방법입니다. 아래와 같이 툴바 기능을 편집하시려면 옵션명을 수정 하면 됩니다. ClassicEditor .create( document.querySelector( '#editor' ), { //-----------------------------------------------------
aabb.tistory.com
TMI
지금 재직 중인 회사에서는 tab을 2칸으로 설정해서 개발 중에 있는데
기본적으로 세팅된 tab 4칸으로 코딩할 때 보다
불필요한 공간을 줄일 수 있어서 굉장히 좋은 것 같다.
그리고 지금 진행 중인 부분인데, 이전에는 해보지 않았던
Editor 부분을 다룰 수 있어서 좋은 경험이 될 것 같다.
JPA에 익숙해져서 mybatis mapper에 대한 지식이 가물가물해질 무렵..
회사에서 사용 중인 mybatis, jsp를 통해 다시 이전에 쿼리를 짰던 기억을 짜내고
엄청난 검색을 통해서 회사 규칙에 최대한 맞춰서 DB 연동도 성공했다.
최대한 모르는 부분에 대한 질문은 지양하고
할 수 있는 한 혼자 해결해 보려고 집에 와서도 야근 아닌 셀프 야근?
해야 할 일에 대해 일정 정리와 공부할 겸
다음날 할 것에 대해 미리 숙지하면서 의외로 성공적인 중간 결과물들을 가지고
다음날 회사에 출근할 수 있어서 만족스러운 날들이다.
마지막으로, IT 회사에 재직 중인 삼촌이 얼마 전 입사 선물로
내 워너비 키보드인 한무무 캠핑 컬러를 선물해 주셨다.
개발의 효율, 삶의 질이 올라가서 너무나 좋다.
키보드 하나 더 장만하고 싶은 욕구가 솟지만 당분간은 참는 걸로.
