Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

fckeditor/ckeditor에서 글쓰기 모드 자체를 미리보기처럼 만들기(커스텀 CSS)

많은 사람들이 글쓰기 모드와 실제 보이는 게 같기를 바란다. ckeditor에서는 그렇게 할 수 있다. 물론 fckeditor에서도 할 수 있다.

config 파일 설정

기본적으로 아래에 나오는 코드를 ckeditor 폴더에 있는 config.js에 써 주면 된다. 그럼 이게 기본 설정이 된다. 아래 코드를 참고하라.

/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
	//여기에 설정 코드를 써 주면 된다.
};

자신이 만든 커스텀 설정 파일을 사용하고 싶다면 CKeditor Docs의 customConfig 항목을 참고하면 된다. 본문에서 ckeditor를 생성할 때, 설정 코드를 넣어 줘야 한다.

ckeditor의 경우

CKeditor Docs의 Content CSS 항목Body Class 항목을 참고하면 된다.

일단 에디터에 사용할 css 파일을 아래 코드처럼 지정해 준다. ckeditor의 예제를 그대로 가져왔다.

//이건 css 파일이 하나일 때
config.contentsCss = '/css/내_스타일.css';
//이건 css 파일이 두 개일 때
config.contentsCss = ['/css/내_스타일.css', '/css/또다른_스타일.css'];

설정을 따로 쓰지 않을 경우 ckeditor 폴더의 contents.css가 기본 스타일이 된다.

그런데 css에는 보통 레이아웃을 위한 class나 id가 함께 있다. 아래 같은 식이라는 것이다.

.view p { font-size:14px; margin: 20px; }

하지만 ckeditor에는 view라는 클래스가 들어가있지 않다.

그걸 위해 Body Class 항목이 존재한다. 아래처럼 써 주면 ckeditor의 class가 view가 되므로 실제 보이는 데서 사용하는 css를 그대로 가져다가 ckeditor용으로 사용할 수 있다. class뿐 아니라 id도 가능하다.

CKEDITOR.config.bodyClass='view';
CKEDITOR.config.bodyId='viewId';

fckeditor의 경우

fckeditor 폴더의 fckconfig.js에서 아래 항목을 찾아서 css파일을 써 주면 된다.

FCKConfig.EditorAreaCSS = '/css/내_css_파일.css' ;

ckeditor처럼 fckeditor도 body id와 class를 지정할 수 있다.

마찬가지로 fckconfig.js에서 아래 항목을 채워 주면 된다.

FCKConfig.BodyId = 'bodyIdName' ;
FCKConfig.BodyClass = 'bodyClassName' ;

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다