ckeditor
#
Find similar titles
- 최초 작성자
- 최근 업데이트
Structured data
- Category
- Programming
Table of Contents
ckeditor #
ckeditor? #
- 자바스크립트 오픈소스 기반 웹 에디터
- 기본적이며 가장 많이 사용하는 웹 에디터
- 설정이 간편하며 이미 보편화 되어 많이 사용하여 안전성이 입증
- 친숙한 UI 제공
- 편의성에 맞는 4가지 모드 제공
- Standard
- Full featured
- Inline editing
- Widgets
- 추가 내용은 (https://ckeditor.com/)에서 확인
browser 호환성 #
1) CKEditor4
desktop 환경 :
Internet Explorer :
8.0 및 9.0 – 거의 완전한 지원,
10 및 11 – 완전한 지원,
Microsoft Edge의 IE 모드 – 전체 지원,
9.0 쿼크 모드 및 9.0 호환 모드 – 제한된 지원.
Firefox, Chrome, Safari, Microsoft Edge, Opera :
최신 안정 릴리스 – 완전한 지원.
mobile 환경 :
Safari (iOS 6+) – 거의 완전한 지원,
Chrome (Android) – 거의 완벽하게 지원.
2) CKEditor5
Chrome (최신 안정 버전).
Firefox (최신 안정 릴리스).
Safari (최신 안정 릴리스).
Opera (최신 안정 릴리스).
Electron (최신 안정 방출).
Edge (최신 안정 릴리스). 알려진 문제 : 선택과 관련된 사소한 문제 : 1.
아직 지원되지 않음 :
Internet Explorer 11. IE11과의 호환성 티켓을 참조.
설정 #
- CKEditor 에서 다운로드
-
기본설정
- 사이트(https://ckeditor.com/)에 접속해서 원하는 버전을 선택한다.
- 원하는 패키지를 선택한 후, 패키지를 다운로드 받을지 CDN으로 사용할지 선택한다.
-
패키지로 다운로드 받았을 시 아래와 같이 ckeditor.js 파일을 포함한다
<script type="text/javascript" src="프로젝트 경로/ckeditor/ckeditor.js"></script>
-
CDN으로 사용할 시 아래와 같이 추가한다.
<script src="//cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>
1) CKEditor4
다운받은 ckeditor 스크립트를 추가한 후 1. Class 명으로 CKEditor 사용 <textarea name="ckArea" class="ckeditor" rows="2" cols="2"> 2. 스크립트로 ckeditor 실행. (height 지정이 따로 가능하다.) window.onload=function(){ CKEDITOR.replace('EDITOR가 십입될 ID', {height: 500}); }
2) CKEditor5
다운받은 ckeditor 스크립트를 추가한 후 1. id명으로 CKEditor 사용 <div id="editor"></div> 2. 스크립트로 ckeditor 실행 ClassicEditor.create( document.querySelector( '#editor' ), { plugins: [ Essentials, Paragraph, Bold, Italic, Image, InsertImage, ImageCaption ], toolbar: [ 'bold', 'italic', 'insertImage' ] }).then(function(newEditor) { $scope.editor = newEditor; }).catch(function(error) { console.error( error ); });
기능 추가 #
한글언어 변환 #
- 기본적으로 ckEditor의 설정은 config.js에서 할 수있다.
- 다운받은 파일의 ckeditor디렉토리에 있다(root) CKEDITOR.editorConfig = function( config ) {
- 한글설정.
- 언어설정 파일경로 : ckeditor/lang config.language = 'ko';
이미지 업로드 기능 추가 #
- ckeditor/config.js 에 기능을 추가한다.
- image 버튼을 눌렀을대 upload부분이 활성화된다
- 서버로 전송을 누르면 설정해놓은 upload.ashx를 호출하여 파일이 업로드된다. 업로드가 끝나면 자바스크립트로 파라미터와 함께 callback함수를 호출해주면 이미지 정보로 callback함수에 넘긴 파라미터로 정보가 입력된다.