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 에서 다운로드

• 기본설정

  1. 사이트(https://ckeditor.com/)에 접속해서 원하는 버전을 선택한다.
  2. 원하는 패키지를 선택한 후, 패키지를 다운로드 받을지 CDN으로 사용할지 선택한다.

  3. 패키지로 다운로드 받았을 시 아래와 같이 ckeditor.js 파일을 포함한다

     <script type="text/javascript" src="프로젝트 경로/ckeditor/ckeditor.js"></script>
     

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

Reference #

• http://ckeditor.com
• https://ojava.tistory.com/1645