CKEditor 란? |
CKEditor를 소개합니다.
CK에디터는 일반적으로 게시판에 글을쓸때 쉽게 편집을 할 수 있도록 도와주는 툴 입니다.
쉬운 설명을 위해 아래 사진을 참고해주세요.
위와같이 게시판 글을 수정하거나 편집을 원한경우, 텍스트 크기, 문단 나눔, 사진업로드등 기능을 편하게 이용하기위해 사용합니다.
CK에디터는 오픈소스 라이브러리 입니다.
하지만 CK에디터가 어느정도 안정이되고 나서부터는 상업적 용도로 사용할때는 일정 비용을 지불하고 사용을 하여야 합니다.
CKEditor 공식 홈페이지 : https://ckeditor.com/ckeditor-5/
CKEditor5 사용법? |
간단하게 CKEditor5 사용방법에대해 소개 드리려합니다.
가장 최신버전인 CKEditor5를 사용한 샘플 예제입니다.
먼저, 홈페이지에 접속해주세요. (https://ckeditor.com/ckeditor-5/)
상단 메뉴에 다운로드 메뉴에 들어가서, 빌드 방식을 선택해주세요.
저는 가장 기본인 Classic을 선택하겠습니다.
빌드 방법에따라 에디터의 사용방법 및 용도가 달라집니다.
미리 Overview에서 용도를 확인하시고 선택해주시면 되겠습니다.
그후 다운로드 메뉴로 내려가 다운을 시도하면 됩니다.
방법은 3가지를 제공하고있습니다.
1. 리눅스 시스템에 바로 다운로드 가능한 링크 (npm)
2. Zip 패키지 윈도우에서 스크립트형식으로 파일을 제공해줍니다.
3. CDN링크 다이렉트로 HTML 스크립트상에 붙여넣어주면 바로 사용이 가능합니다.
* CDN 용어의 자세한사항은 '용어(약자)' 게시판을 참고해주세요.
전 가장 간단한 CDN을 통하여 제작을 해보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <HTML> <HEAD> <TITLE> CKEditor5 Sample </TITLE> <!-- 1. CDN --> <script src="https://cdn.ckeditor.com/ckeditor5/11.0.1/classic/ckeditor.js"></script> </HEAD> <BODY> <!-- 2. TEXT 편집 툴을 사용할 textarea --> <textarea name="content" id="editor"></textarea> <script> // 3. CKEditor5를 생성할 textarea 지정 ClassicEditor .create( document.querySelector( '#editor' ) ) .catch( error => { console.error( error ); } ); </script> </BODY> </HTML> | cs |
주석 을 순서대로 확인 해보겠습니다.
1. CDN스크립트를 그대로 <head>에 붙혀주었습니다. 이로써 바로 CKEditor 스크립트를 마음대로 사용할수 있는 환경이 완성되었습니다.
2. CKEditor툴을 사용할 textarea를 <body>에 만들어 주었습니다.
3. 이제 생성한 textarea에 ckeditor를 생성해주는 스크립트문을 작성하였습니다. (홈페이지 문서 페이지에 코드를 제공합니다.)
CKEditor 결과 |
사진과 같이 CKEditor가 정상 구동 되었습니다.
Sample.html혹시 따라함에 어려운분이 계실까봐, 위 링크에 샘플 파일을 첨부파일에 첨부하겠습니다.
[번외] CKEditor 만약 "이미지 업로드" 기능을 제거하고 싶다면? |
아주 간단 합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <HTML> <HEAD> <TITLE> CKEditor5 Sample </TITLE> <script src="https://cdn.ckeditor.com/ckeditor5/11.0.1/classic/ckeditor.js"></script> </HEAD> <BODY> <textarea name="content" id="editor"></textarea> <script> ClassicEditor .create( document.querySelector( '#editor' ), { // 제거 하고싶은 플러그인 (배열) removePlugins: [ 'ImageUpload' ] } ) .catch( error => { console.error( error ); } ); </script> </BODY> </HTML> | cs |
주석 부분에 추가 스크립트 작성으로 간단히 CKEditor에 필요하지 않은 플러그인을 제거 할 수가 있습니다.
자세한 내용은 문서 안에 있습니다.
위 스크린샷과 같이 이미지업로드 버튼이 사라진것을 확인할수 있습니다.
더 자세한 추가사항 및 기능은 아래 링크로 확인 하실수 있습니다.
CKEditor 문서 링크 : https://ckeditor.com/docs/ckeditor5/latest/builds/
'IT > JS' 카테고리의 다른 글
| 자바스크립트 ES6 let, const keyword (0) | 2021.05.17 |
|---|---|
| MosaicFlow 모자익플로우 알아보기 (0) | 2019.02.11 |
| 자바스크립트 ES6 '=>' 화살표 문법 (Arrow function) (0) | 2019.01.09 |
| JavaScript 타임스탬프->날짜변환(Date) / 숫자형 3자리단위 콤마(,) 찍기 (0) | 2018.12.20 |
| JQuery/JavaScript QR코드 생성 플러그인 (3) | 2018.10.24 |