포스트 보기

[Library] 07. 온라인 html 편집툴(CKEditor 4) 설치 및 초기화

: 7 : cheolee

: 공부 > 블로그개발 : 43 : 2021-07-22

포스트 작성을 위한 온라인 html 편집툴 api를 설치합니다.

여러종류의 api들이 있지만 본 블로그에는 그 중 무료이며 WYSIWYG( What You See Is What You Get) 기능이 있는 CKEditor 를 설치합니다.

설치 방법은 CDN 추가 방식과 파일 다운로드 방식 두 가지가 있는데, 후자의 방식으로 설치를 진행합니다.

CKEditor 4 설치

STEP 1) 설치파일을 다운로드 합니다.

CKEditor 4 다운로드 페이지

STEP 2) 다운로드 받은 파일을 압축해제 하여 프로젝트 폴더에 복사합니다.

ex) ~/myblog/js/lib/ckeditor

CKEditor 4 초기화

STEP 1) CKeditor 4 스크립트 소스를 추가합니다.

~/myblog/application/views/home.php 파일 <head> tag 에 아래의 내용 추가

	
			1
2

			<!-- ckeditor 4 -->
<script src="/js/lib/ckeditor/ckeditor.js"></script>

			cs

STEP 2) CKeditor 4를 적용할 요소를 생성합니다.

동일 파일 <body> tag에 아래의 내용 추가

	
			1
2
3
4
5
6
7
8
9
10

			<div class="input-group mb-3">
   <span class="input-group-text" id="inputGroup-sizing-default">제목</span>
   <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
<div class="mb-3">
   <textarea id="content" style="display:none;"></textarea>
</div>
<div>
   <button type="button" class="btn btn-outline-secondary">포스트 저장</button>
</div>
Colored by Color Scripter

			cs
		

STEP 3) 자바스크립트 코드를 추가합니다.

동일 파일 적당한 위치에 아래의 내용 추가

	
			1
2
3
4
5
6

			<script>
  $(function(){
      // ckeditor 4
      var editor = CKEDITOR.replace( 'content' );
  });
</script>
Colored by Color Scripter

			cs
		