ck 에디터 설치하기(php)

기타정보

by 김일국 2011. 6. 29. 20:35

1. 우선 CKEditor 다운로드 받는다.

http://ckeditor.com/download

2. 압축을 풀고 생성된 ckeditor 폴더를 웹사이트 프로젝트에 추가한다.

사이트의 최상위 루트 또는 위치시키고자하는 하위 폴더에 옮기면 된다.

/wwwroot 가 최상위 루트라고 가정할 경우, 아래처럼 폴더구조를 구성한다.

/wwwroot

└ ckeditor

3. CKEditor를 적용하려는 /board/write.aspx 파일의 소스에서

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<textarea name="content" class="ckeditor"><?echo stripslashes($my_content);//htmlspecialchars($my_content) ?></textarea>

<script type="text/javascript">
// <div 태그에 클래스가 있으면 공백제거
         var emptyDivFilter =
         {
            elements : {
               div : function( div )
               {
      if ( div.attributes["class"] != "" ) // 특정 클래스명만 적용시 if ( div.attributes["class"] != "line" )
                  {
                     var writer = new CKEDITOR.htmlParser.basicWriter();
                     div.writeChildrenHtml( writer );
                     var innerHTML = writer.getHtml();
                     if ( CKEDITOR.tools.trim( innerHTML ).match( /^(?:&기호넣으세요nbsp;|\xa0|<br \/>)$/ ) )
                           div.children = [];
                  }
                  return div;
               }
            }
         };

//CKEDITOR.replace('nttCn');//기본
//필터에 우선 순위를 낮게 설정한다.(아래)

         CKEDITOR.replace( 'content', { on :
         {
            'pluginsLoaded' : function ( evt )
            {
               var editor = evt.editor;
               var htmlFilter = editor.dataProcessor.htmlFilter,
               dataFilter = editor.dataProcessor.dataFilter;
               htmlFilter.addRules( emptyDivFilter, 100 );
               dataFilter.addRules( emptyDivFilter, 100 );
            }
         }

}

);

   //엔터키일때 P태그가 아닌 br태그를 원할때 추가(아래)
   CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
   CKEDITOR.config.shiftEnterMode = CKEDITOR.ENTER_P;

CKEDITOR.config.enterMode = CKEDITOR.ENTER_DIV;
</script>

여기까지 진행하고 write.aspx를 호출하면 ckeditor가 적용된걸 확인할 수 있다.

4. CKEditor의 색상과 크기, 툴바 등이 맘에 들지 않는다면 아래 소스를 참고하여 이것저것 수정하면 된다. ( /ckeditor/config.js )

CKEDITOR.editorConfig = function( config )

{

config.toolbar = 'MitBasic';

    config.toolbar_MitBasic =
    [
        ['Source','NewPage','Preview'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
        //['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        //['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
        // '/',
        //['Styles','Format'],
        ['Bold','Italic','Strike'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['Link','Unlink','Anchor'],
        ['Maximize','-','About']
];

//config.language = 'ko';
//config.uiColor = '#eeeeee';
//config.enterMode = CKEDITOR.ENTER_BR;
config.height = '600';
//config.width = '650';
//config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
//config.fullPage = false;

};

여러분은 설정 파일에 원하는 만큼의 툴바 설정을 만들어 넣을 수 있다. 이후, 특정한 기준에 의해서 각각의 에디터 인스턴스에 적용시킬 수 있다. 다음의 코드는 한 페이지 안에 서로 다른 툴바를 사용하는 두개의 에디터를 생성하는 것을 보여준다 :

CKEDITOR.replace( 'content',
    {
        toolbar : 'MitBasic'
    });
CKEDITOR.replace( 'content2',
    {
        toolbar : 'Basic'
    });

</script>

5. 내용을 입력했는지 체크하려면 아래와 같이 접근한다.

var editor_data = CKEDITOR.instances.content.getData();
if (editor_data == '') {
      alert('내용을 입력해 주세요.');
      CKEDITOR.instances.content.focus();
   return false;
    }

</script>

(주의) 입력 쿼리에 문제가 있을 경우 $content = stripslashes($content);

이렇게 처리하면 소스로 저장이 된다.

'기타정보' 카테고리의 다른 글

iis 로 2명이상 웹개발시 사용자가 많습니다. 에러처리 (0)	2012.02.01
드림위버 inc파일 디자인보기 및 코드정렬 기능사용 (0)	2011.07.11
웹표준(웹접근성) 한글 온라인검증 주소 (0)	2011.05.19
exploit.js.cve-2010-0806.a 감염정보 (0)	2011.03.26
MMC에서 스냅인을 만들지 못했습니다. 에러메세지 처리방법 (0)	2010.12.28