Skip to content

ckeditor #

Find similar titles

10회 업데이트 됨.

Edit
  • 최초 작성자
    javis
  • 최근 업데이트
    dseonah

Structured data

Category
Programming

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 #

0.0.1_20231010_1_v71