JavaScript

[JavaScript] CKEditor 연동하기

사악미소 2014. 9. 11. 15:26
반응형

01. CKEditor 사이트에 접속하여 CK에디터를 다운받는다.(http://ckeditor.com/download)

  ※ Basic Package, Standard Package, Full Package가 있는데 여기서는 우선 Standard Package로 진행한다.





02. 다운받은 ckeditor.zip 파일의 압축을 해제하고 압축해제된 파일을 CK에디터를 적용할 프로젝트에 위치시킨다.





03. 기본적으로 설정을위해 <head>영역에 CK에디터를 불러올 자바스크립트를 생성한다.

<head>
    <title>게시판</title>
    <script type="text/javascript" src="./ckeditor/ckeditor.js"></script>
</head>




04-1. textarea의 class로 지정하는 방법

            <textarea name = "boContent" class ="ckeditor" cols = "67" rows = "15"></textarea>




04-2. id를 지정하여 스크립트로 불러오는 방법

            <textarea name = "boContent" id = "contents" cols = "67" rows = "15"></textarea>
                  <script>
                        CKEDITOR.replace('contents');
                  </script>

  ※ name의 경우 데이터를 전달하기 위하여 id를 사용하였고 문제없음을 확인했다.




05. 이제 확인하면 아래와 같이 CK에디터가 적용된 것을 확인 할 수 있다.

반응형
저작자표시 (새창열림)