Skip to content

ckeditor #
Find similar titles

Structured data

Category
Programming

ckeditor #

ckeditor? #

  • 자바스크립트 오픈소스 기반 웹 에디터
  • 기본적이며 가장 많이 사용하는 웹 에디터
  • 설정이 간편하며 이미 보편화 되어 많이 사용하여 안전성이 입증
  • 친숙한 UI 제공
  • 편의성에 맞는 4가지 모드 제공
  • Standard
  • Full featured
  • Inline editing
  • Widgets
  • 추가 내용은 (https://ckeditor.com/)에서 확인

설정 #

  • CKEditor 에서 다운로드
  • 기본설정

     <script type="text/javascript" src="{path}/ckeditor.js">
     이후
     1. Class 명으로 CKEditor 사용
     <textarea name="ckArea" class="ckeditor" rows="2" cols="2"></textarea>
     2. javascript로 CKEditor 사용 설정
     <script type="text/javascript">
        window.onload=function(){
        CKEDITOR.replace('EDITOR가 십입될 ID');
        }
     <script>
    

기능 추가 #

한글언어 변환 #

  • 기본적으로 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_20140628_0