ckeditor #
Find similar titles

Structured data

Category: Programming

ckeditor

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함수에 넘긴 파라미터로 정보가 입력된다.

ckeditor #
Find similar titles

Structured data

Table of Contents

ckeditor #

ckeditor? #

browser 호환성 #

설정 #

기능 추가 #

한글언어 변환 #

이미지 업로드 기능 추가 #

Reference #