대부분의 게시판을 구현하다보면 에디터 기능을 추가하게 되는데
세상에는 다양한 에디터들이 많다.
대표적인 스마트에디터, summernote 등등등등...
처음엔 나도 스마트에디터로 적용하는 방법을 찾아 헤매다녔는데 디자인이 그닥. 구리다.
(사실 별 느낌 없었으나 선임님이 별로지않냐길래..ㅋ 듣고보니 그런거같음)
되게 다양하게 적용(?)하는 방법이 있는 것 같긴한데...... 너무 헷갈리고 장단점도 있는 것 같아서 정리해본다.
우선 CKEditor는 콘텐츠를 웹 페이지나 온라인 애플리케이션에 직접 작성할 수 있게 하는 위지위그 리치 텍스트 에디터이다.
자바스크립트로 작성되어 있고 오픈 소스로 제공하는 것도 상용 라이선스를 제공하고 있어서
무료로 사용이 가능하다.
CKEditor5는 Classic, Inline, Balloon, Balloon block, Decoupled document 5가지 타입이있는데
나는 Classic Type으로 진행했다는 점.
ckeditor5 적용하는 방법
ckeditor를 적용하는 방법은 두가지가 있다.
1. CDN을 사용하는 방식
2. 프로젝트 내에 CKEditor 파일을 포함하는 방식
각각의 방식에는 장단점이 있는데 우선 어떤 방식을 적용할지 알기위해서는 장단점부터 체크하고 지나가본다.
CDN을 사용하는 방식의 장단점과 적용방법
우선 CDN(Contents Delivery Network 또는 Content Distribution Network)은
전 세계에 분산된 서버 네트워크를 통해 사용자에게 콘텐츠를 빠르고 안정적으로 전달하는 시스템이다.
CDN 서버는 웹사이트의 정적 콘텐츠(이미지, CSS, JavaScript 파일 등)나 동적 콘텐츠를 사용자에게 제공하여
웹사이트의 성능과 안정성을 향상시킨다.
CDN 장점
1. 빠른 로드 속도
위에서 CDN 서버는 전 세계에 분산되어 있다고 했다.
그렇기 때문에 사용자에게 가장 가까운 서버에서 파일을 제공해주기 때문에 로드 속도가 굉장이 빠르다.
2. 서버 부담의 감소
파일을 외부 서버에서 제공받아 사용하기 때문에 본인 서버 자체에 부하를 감소 시킬 수 있다.
3. 자동 업데이트
외부 서버에서 URL 형태로 받아오기 때문에 제작사에서 계속 업데이트를 해준다면
항상 최신 버전을 사용할 수 있고 보안 패치, 새로운 기능 등을 자동으로 적용할 수 있다.
4. 간단한 설정
장고 내에서 패키지를 설치해서 사용하는건 여간 까다로운게 아니다.
그에 비하면 CDN은 HTML 안에 몇 줄의 스크립트 태그를 추가하는 것으로 쉽게 설정할 수 있다.
CDN 단점
1. 의존성 문제
외부 서버이기 때문에 서버 부담이나 사용이 편리하지만 반대로
너무 가용성에 의존하게 되어 CDN 서버가 다운되거나 느려질 경우 내 서버도 같이 영향을 받는다.
2. 커스터마이징 제한
장단점 모두에 포함되는 사항이지만 ckeditor의 가장 큰 장점은 내 마음대로 커스터마이징이 된다는 점인데
CDN을 사용한 경우 특정 버전을 고정해서 사용하기 어렵고, 커스터마이징된 버전을 사용하려면 별도의 설정이 필요하다.
3. 보안 우려
보안 패치가 항상 될 것 같은데 이게 뭔 말이냐 싶겠지만... 상상해보자
외부 스크립트를 사용하는 것이기 때문에 신뢰할 수 있는 CDN을 사용해야 한다.
설령 신뢰할 수 있는 서버였다하더라도 호오오옥시나 해커의 영향으로 누군가 쓰레기짓을 했다면?
아마 CDN을 가져다 쓰신 분들의 서버는 그 날로 사요나라-
이러한 양날의 검 같은 방식이라 어떤게 더 맞는 방식인지는 충분히 고민해보고 사용하는게 좋다.
그럼 CDN은 어떻게 적용하나?
📌CDN으로 CKeditor 적용하기
1. https://ckeditor.com/ckeditor-5/download/
CKEditor 5 - Download Latest Version
Download a ready-to-use CKEditor 5 Build. Install, download or serve a ready-to-use rich text editor of your choice.
ckeditor.com
2. 링크로 들어가서 Choose your build에서 원하는 타입을 선택해주고
Download it의 두번째 칸에 있는 CDN 스크립트 코드를 Copy해준다.
3. 에디터를 적용하고자 하는 html 파일에 들어가서 <head>태그 또는 <body>태그에 넣어준다.
<head>태그에 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
</head>
<body>
</body>
</html>
또는 <body>태그 에 적용
+ 어차피 4번에 있는 HTML요소 적용 스크립트도 넣어야되서 개인적으로는 <body>태그에 같이 밀어넣는 편
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
</body>
</html>
4. Classic Editor를 HTML 요소에 적용하는 스크립트도 추가해준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create(document.querySelector('#editor'))
.catch(error => {
console.error(error);
});
</script>
</body>
</html>
5. 적용!
6. (선택사항) 스타일 적용하기
ckeditor의 기본 세팅은 한 줄이다.
따로 스타일 지정이 없으면 엔터를 쳐야 박스가 한 줄 씩 늘어나면서 보기좋은? 형태가 된다.
즉. 내 적용 페이지와 똑같이 나오길 원한다면 css 적용을 같이해주면 된다.
<style>
.ck.ck-editor{
max-width: 1000px;
}
.ck-editor__editable {
min-height: 400px;
}
</style>
추가적인 내용이지만 그냥 이런게 있다 정도로 넘어가면 좋을 것 같아서 몇줄 적어놔본다.
CDN을 통해 CKEditor를 사용할 때 URL을 살펴보면 버전이 명시가 되어있다.
자동으로 최신 버전을 로드하려면 URL에서 특정 버전을 명시하지 않고 최신 버전을 가리키는 URL을 사용해야 한다.
CKEditor 최신 버전 사용 예시
CKEditor의 최신 버전을 사용하려면 다음과 같이 특정 버전을 명시하지 않고 사용하려는 방법이 있긴 하지만,
최신 버전을 자동으로 제공하는 URL을 공식적으로 제공하지 않는 경우에는 주기적으로 URL을 수동으로 업데이트해야 한다.
<!-- CKEditor 최신 버전 (버전 명시 안 함) -->
<script src="https://cdn.ckeditor.com/ckeditor5/latest/classic/ckeditor.js"></script>
CKEditor 공식 사이트에서는 latest와 같은 키워드가 아닌, 특정 버전 번호를 사용하는 것이 일반적이기 때문에
CKEditor 공식 문서에서 latest 같은 키워드를 사용한 URL 패턴을 제공하지 않는다면, 굳이? 사용하기가 꺼려진다.
안정적인 방식
가장 안전한 방법은 특정 버전을 명시하고, 주기적으로 CKEditor 공식 사이트를 확인하여 새로운 버전이 나왔을 때 URL을 업데이트하는 것으로
위에 적어놓은 방식이다.
<!-- CKEditor 특정 버전 -->
<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
프로젝트 내에 CKEditor 파일을 포함하는 방식
장점
1. 커스터마이징 용이
필요에 따라 CKEditor를 수정하거나 플러그인을 추가할 수 있고 특정 버전으로 고정해서 사용 할 수 있다.
2. 의존성 관리
외부 서버에 의존하지 않기 때문에 프로젝트의 모든 파일이 로컬에 있어 제어가 용이한 편이다.
단점
1. 업데이트 관리
필요한 경우 최신 버전으로 수동으로 업데이트해야하고 보안 패치나 새로운 기능을 적용하는 데 시간이 걸릴 수 있다.
2. 서버 부담 증가
모든 클라이언트에게 파일을 직접 제공해야 하기 때문에 서버의 네트워크 트래픽과 스토리지 사용량이 증가하여
서버의 부담이 증가한다.
3. 로드 속도
CDN보다 로드 속도가 느릴 수 있으며, 만약 서버를 사용하는 사람이 많다면 더욱 더 느려질 수 밖에 없다.
📌프로젝트 내에 CKEditor 파일을 포함하는 방식으로 적용하기
1. https://ckeditor.com/ckeditor-5/online-builder/
CKEditor 5 Online Builder | Create your own editor in 5 steps
Create your own CKEditor 5 build with customized plugins, toolbar and language in 5 simple steps.
ckeditor.com
2. 링크로 들어가서 Choose your build에서 원하는 타입을 선택해준다.
3. 타입을 선택하면 원하는 플러그인을 추가하거나 삭제할 수 있게된다.
+ 참고로 CKbox라는 놈이 자동으로 들어가있다. 알고보면 유료인 놈이니 슬쩍 ★ 삭제-!! ★
4. 필요한거 넣고 뺄거 빼고나면 플러그를 내가 원하는 위치를 조정한다.
캡쳐는 아주 기본의 퓨어한 상태!
클릭 또는 스크롤로 원하는 위치/플러그인 삭제가 가능하다.
5. 언어지정
한국에서 쓸거니까?
긴 말 생략!
6. START!
모든게 다 세팅이 되었다면 START 버튼을 눌러준다.
그럼 열심히 빌드가 되고 다운로드 버튼이 나온다.
7. 압축풀고 적용하기
다운로드가 다 됬다면 압축을 풀고 프로젝트 폴더에 넣어준다.
자프링 프로젝트라면 resource 안 static 폴더에, 나처럼 장고-파이썬이라면 아래와 같이 static 디렉토리 안에!
프로젝트 안에 잘 넣어줬다면, CDN과 마찬가지로 스크립트까지 넣어준다.
나같은 경우는 랜더방식을 사용했다.
<script src="{% static 'ckeditor5/build/ckeditor.js' %}"></script>
<script>
ClassicEditor
.create(document.querySelector('#editor'))
.catch(error => {
console.error(error);
});
</script>
내가 커스터마이징한 놈이 제대로 불러와진다! 끝!
'✨Framework+Library > 🔵Django' 카테고리의 다른 글
| [Django] 가상환경으로 프로젝트 세팅하기2 (pipenv) (0) | 2024.09.19 |
|---|---|
| [Django] Q 객체 : 쿼리의 효율 올리기 (0) | 2024.07.16 |
| [Django] 파이썬 버전 바꾸고 가상환경으로 프로젝트 세팅하기(venv) (1) | 2024.06.15 |
| [Django] @action과 @api_view : View 하나에 같은 HTTP 요청 메서드가 두개일 때 API 구현하기 (0) | 2024.04.25 |
| [Django] Django:장고 웹 프레임워크 구조 (0) | 2024.04.01 |