CKEditor 사용법

Setting

CKEditor 사용법

SHXL2 2018. 12. 7. 18:30

게시판을 만들 때 글쓰는 곳을 조금 더 이쁘게 꾸며주는 에디터를 적용시킨 적이 있습니다. 바로 CKEditor라는 텍스트 에디터입니다. 오픈소스이기 때문에 무료 사용이 가능한데 상용목적일 경우는 모르겠네요..

CKEditor를 사용한 화면과 일반 화면의 차이

현재 프로젝트에 사용중인 화면입니다.

CKEditor를 이용한 화면이 훨씬 다양하고 가득차보입니다. 기능적으로도 그렇습니다.

이미지를 올릴 수 있고 또 유튜브를 올릴 수도 있습니다.

참고로 본 사용법은 CKEditor 4 버전을 기준으로 작성되었습니다.

1) 사이트(https://ckeditor.com/)에 접속해서 왼쪽 상단 메뉴를 클릭하면 아래와 같이 CKEditor 버전 선택이 가능합니다.

2) 오른쪽 상단 Download 클릭.

3) Standard Package가 가장 무난하지만 유튜브를 사용하기 위해 Customize를 선택.

4) (Customize를 선택하지 않으신 분들은 4~8 단계 생략가능)원하는 툴바 스타일 선택.

5) 원하는 플러그인을 선택(유튜브를 사용하고싶은 분들은 Youtube Plugin 선택)

6) 원하는 스킨 선택.

7) Korean 추가.

8) 동의 후 Download.

9) 압축파일을 풀면 ckeditor 폴더가 있습니다. 해당 폴더를 자신의 프로젝트 경로인 WebContent에 넣어줍니다.

10) jsp 파일을 만들고 CKEditor가 생성되었는지 확인해보겠습니다.

10-1) 아래와 같이 ckeditor.js 파일을 포함합니다.

1

<script type="text/javascript" src="<%=PATH %>/ckeditor/ckeditor.js"></script>

cs

<%=PATH %> 에는 프로젝트 경로가 오면 됩니다.

10-2) text.jsp에 textarea가 선언된 곳에 아래와 같이 입력합니다.(height 지정이 따로 가능합니다)

1
2
3
4
5
6

<textarea class="form-control" id="p_content"></textarea>
<script type="text/javascript">
 CKEDITOR.replace('p_content'
                , {height: 500                                                  
                 });
</script>
Colored by Color Scripter

cs

text.jsp

<div class="container">
    <div class="content" style="width: 70%">
    
        <div class="row justify-content-md-center">
            <div class="col-sm-9">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <label class="input-group-text">제목</label>
                  </div>            
                  <input type="text" class="form-control">              
                </div>
            </div>
            <div class="col-sm-3">
                <div class="input-group mb-3">
                    <select class="custom-select" id="inputGroupSelect03">
                    <option selected>분류</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                  </select>  
                </div>
            </div>            
      </div>
      
      <hr>
      
      <div class="row justify-content-md-center">
          <div class="col_c" style="margin-bottom: 30px">
                <div class="input-group">                 
                  <textarea class="form-control" id="p_content"></textarea>
                  <script type="text/javascript">
                  CKEDITOR.replace('p_content'
                                                  , {height: 500                                                  
                                                  });
                  </script>
                </div>
            </div> 
      </div>
      
      <div class="row justify-content-md-center">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">GitHub</span>
              </div>
              <input type="text" class="form-control">
            </div>
      </div>
      
      <div class="row justify-content-md-center">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroupFileAddon01">썸네일</span>
              </div>
              <div class="custom-file">
                  &nbsp;<input type="file" class="form-control-file" id="exampleFormControlFile1">
              </div>
            </div>
      </div>
      
      <div class="row justify-content-md-center">
        <button type="submit" class="btn btn-outline-secondary" style="width: 20%; font-weight: bold">
             등   록          
            </button>
        </div>
  </div>
</div>

11) 설치가 성공적이라면 아래와 같이 textarea가 변한 것을 확인할 수 있습니다.

12) 이제 이 CKEditor를 이용해서 이미지 업로드를 해보겠습니다.

이미지를 업로드하기 위해서는 따로 업로드 로직을 구현해야합니다. 하지만 CKFinder를 이용하면 몇가지 설정으로 서버에 파일을 업로드시키는 것이 가능합니다.

CKFinder를 설치하기 위해 사이트(https://ckeditor.com/ckeditor-4/download/#ckfinder)에 접속합니다.

13) 언어 선택 후 다운로드.

14) 압축을 풀면 아래와 같이 폴더가 생성됩니다.

우리가 필요한 파일은 해당 폴더 안에 있는 war 압축파일에 있습니다.

14-1) CKFinderJava-2.6.2.1.war 파일 압축을 풀어줍니다.

압축을 풀면 CKFinderJava-2.6.2.1 폴더가 생성됩니다.

14-2) CKFinderJava-2.6.2.1 폴더에 들어가보면 ckfinder 폴더가 보입니다.

해당 폴더를 프로젝트 WebContent에 넣어주겠습니다.

15) 프로젝트 WebContent - WEB-INF - lib 폴더에 아래와 같이 jar 파일을 추가합니다.

파일 업로드를 위해 commons-fileupkoad.jar 와 commons-io.jar 파일도 같이 추가해야 합니다.

jar 파일이 위치한 경로 : ckfinder_java_2.6.2.1\ckfinder\CKFinderJava-2.6.2.1\WEB-INF\lib

16) 프로젝트 WebContent - WEB-INF 경로에 config.xml 파일 추가.

config.xml이 위치한 경로 : ckfinder_java_2.6.2.1\ckfinder\CKFinderJava-2.6.2.1\WEB-INF

17) 이미지 또는 파일을 담을 폴더 생성.

CKFinder를 이용해서 이미지(또는 파일)를(을) 업로드시키게 되면 서버에 업로드가 되면서 본인이 지정한 폴더에 저장이 됩니다.

WebContent에 이미지가 저장될 폴더를 생성합니다.

그리고 아래 경로에 들어가 폴더가 생성되었는지 확인합니다. 만약 생성되지 않았다면 해당 경로에 강제로 생성합니다.

경로 : 본인 workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\본인 프로젝트명

18) 16)에서 추가한 config.xml 파일 수정.

수정할 부분은 15번 라인과 20, 21번 라인입니다.

15번 라인 : <enabled>true</enabled> 와 같이 true로 바꿔줍니다.

20번 라인

: <baseDir>?:\WORKPACENAME \.metadata\.plugins\org.eclipse.wst.server.core\tmp0\

wtpwebapps\PROJECTNAME \FOLDERNAME </baseDir>

? ☞ 본인의 프로젝트가 위치한 드라이브

WORKPACENAME ☞ 본인의 워크스페이스명

PROJECTNAME ☞ 본인의 프로젝트명

FOLDERNAME ☞ 17)에서 만든 폴더명

21번 라인 : <baseURL>/PROJECTNAME /ckstorage</baseURL>

PROJECTNAME ☞ 본인의 프로젝트명

(이 때, 주의 해야 할 점이 있다. 본인 프로젝트의 Tomcat - server.xml의 Context path가 "/"로 되어있다면 프로젝트명이 아닌 /ckstorage로만 작성해야 합니다)

19) ckeditor - config.js 수정.

별다른 수정을 하지 않았다면 39 ~ 43번 라인의 코드가 없을 것입니다.

39 ~ 43번 라인을 추가합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

/**
 * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */
 
CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config
 
    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',       groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];
 
    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';
 
    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';
 
    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';
    
    config.filebrowserBrowseUrl = "../ckfinder/ckfinder.html";
    config.filebrowserFlashBrowseUrl = "../ckfinder/ckfinder.html?type=Flash";
    config.filebrowserUploadUrl = "../ckfinder/core/connector/java/connctor.java?command=QuickUpload&type=Files";
    config.filebrowserImageUploadUrl = "../ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images";
    config.filebrowserFlashUploadUrl = "../ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash";
};
 
Colored by Color Scripter

cs

20) WebContent - WEB-INF - web.xml 아래 내용 추가

<!-- CKFINDER START -->
<servlet>
  <servlet-name>ConnectorServlet</servlet-name>
  <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
  <init-param>
      <param-name>XMLConfig</param-name>
      <param-value>/WEB-INF/config.xml</param-value>
  </init-param>
  <init-param>
      <param-name>debug</param-name>
      <param-value>false</param-value>
  </init-param>
  <load-on-startup>1</load-on-startup>
</servlet>
  
<servlet-mapping>
  <servlet-name>ConnectorServlet</servlet-name>
  <url-pattern>/ckfinder/core/connector/java/connector.java</url-pattern>
</servlet-mapping>  
<!-- CKFINDER END -->

21) 이제 이미지를 업로드해보겠습니다. 이미지를 클릭하면 아래와 같이 업로드가 보일 것입니다.

파일 선택 ☞ 원하는 이미지 선택 ☞ 서버로 전송