본문 바로가기
지속가능티끌/웹,워드프레스

CKEditor. 설치.설정

by i.got.it 2016. 8. 22.


 

개요.

 
CKEditor 설치, 설정법들.

사전준비사항.
1. CKEditor 다운로드 -> http://igotit.tistory.com/904

 


 

 

CKEditor 웹서버 설치.

 
CKEditor 는 웹서버에 폴더를 통째로 올리기만 하면 되며, 서버측에서 특별히 설정할것 없음.

다운로드 받은 압축파일 해제하여 풀더명 CKEditor 전체(아래그림 붉박폴더 전체)를 서버에 ftp 등으로 업로드하면 됨. 
 

 


 

 

CKEditor 웹페이지에 추가.

 
 
CKEditor 를 웹페이지에서 활용하는 기본 개념. 아래 코드 처럼 작성됨.

즉, editor1 이라는 아이디를 갖는 textarea 의 것이 편집기에 표현된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="../ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );
            </script>
        </form>
    </body>
</html>


 


 

 

CKEditor Configuration

 

CKEditor 의 Configuration 에서 에디터의 폭, 높이 , 언어, 스킨 색상 설정등이 가능하다. 
설정가능한 모든 항목들 보기 -> http://docs.ckeditor.com/#!/api/CKEDITOR.config

CKEditor Configuration 설정 3가지 방식.
1. 패키지에 같이 배포된 config.js 파일에 설정사항 기록.
2. CKEditor 사용되는 웹페이지 내에서 설정사항 기록.
3. 사용자 정의 js 파일 이용하는법.
- 상기  3가지 방식 상세 설명 -> http://docs.ckeditor.com/#!/guide/dev_configuration

CKEditor  폭, 높이 설정.
CKEditor 가 사용되는 페이지내에서 에디터의 폭과 높이설정하는 예.
- 아래 코드는 에디터의 폭을 640 으로 설정하는 코드예이다.


1
2
3
4
5
6
7
    <script>
    CKEDITOR.replace('editor1',{
        width: 640,
        height: 600
    } );
    </script>
 



 


 


///905.

저작자표시 비영리 변경금지

'지속가능티끌 > 웹,워드프레스' 카테고리의 다른 글

CKEditor. html태그 자동 삭제 방지 설정.  (0) 2016.08.27
gist-embed 설치. 사용예  (0) 2016.08.26
CKEditor. 개요, 다운로드. 위지윅 웹에디터.  (0) 2016.08.22
워드프레스 포스트, 페이지의 리비젼 수량 제한.  (0) 2014.11.14
가비아에서 워드프레스 설치후 localhost, 도메인주소, .htaccess, 한글오류.  (0) 2014.11.13

관련글

댓글


 
.

비트코인



암호화폐       외환/나스닥/골드         암호화폐/외환/나스닥/골드
     
현물 |선물 인버스 |선물 USDT       전략매니저(카피트레이딩)         프랍 트레이더 온라인 지원가능. MT4,MT5



티스토리툴바