웹마스터 팁
CKEditor 이용시 몇가지 유용한 설정
2015.05.02 10:59
./common/js/plugins/ckeditor/ckeditor/config.js 를 만들면 사용자 설정을 읽어서 에디터에 반영 합니다.
CKEDITOR.editorConfig = function( config ) {
// 설정값들을 이 사이에 입력하면 됩니다.
};
1. 사용해보신분들은 아시겠지만 기본 상태에서는 대부분의 빈 태그를 자동으로 삭제합니다. 특히 폰트어썸이나 xeicon을 사용할때 i태그를 사용하는데 이를 빈 태그로 인식해서 자동 삭제하는바람에 공백을 추가하는등의 꼼수를 부려야 삭제 되지 않습니다. 많이 사용하는 i태그가 지워지는걸 방지하기 하려면 아래의 설정을 입력하면 됩니다.
CKEDITOR.dtd.$removeEmpty['i'] = false;
2. CKEditor 기본 상태에서는 줄바꿈을 p태그로 처리 합니다. 이것을 br태그로 변경하고자 한다면 아래 설정값을 추가하세요.
config.enterMode = CKEDITOR.ENTER_BR;
3. 줄바꿈시 자동 추가되는 p태그나 공백이 없는 p태그를 수동으로 입력하면 에디터가 자동으로 공백문자를 추가합니다. 이게 싫다면 아래 설정값을 추가합니다.
config.fillEmptyBlocks = false;
댓글 11
-
최황삼
2015.05.03 18:18
-
prologos
2015.05.03 23:32
글쎄요.. 이상한점은 보이지 않는데요!? 다른 위치의 config.js를 수정하셨나 확인 해보시구요. 새로 작성하는 글에서 테스트 하신거죠?
-
최황삼
2015.05.04 14:35
본문에 언급하신 경로에서 EditPlus로 config.smaple.js를 열고 3가지 사항을 복사하여 추가한 후 config.js 로 저장하였으므로 다른 위치는 아닌 것 같습니다. 또한 새로 작성하여 테스트해 보았습니다. 아뭏튼 친절하게 답변해주셔서 감사드립니다.
-
Paul
2015.05.04 14:56
아참. 브라우저의 캐시도 지우고 브라우저를 재 시작해 보셨나요? 전 그렇게 하니 적용됐었습니다. -
최황삼
2015.05.30 22:57
여러차례 브라우저의 케시를 삭제도 해보고 바이러스프로그램의 최적화도 시행하였으나 여전합니다.
감사합니다.
-
imyouridea
2016.07.23 18:46
파일명을 바꾸고 config.js 이걸올리세요~
-
큰돌♡
2018.07.17 22:30
아주 오래 지난 글이지만, 혹시나 같은 문제로 고민하는 분이 계실까봐 댓글 남깁니다.
CKEDITOR.dtd.$removeEmpty['i'] = 'false';
config.enterMode = 'CKEDITOR.ENTER_BR';
config.fillEmptyBlocks = 'false';여기서 = 다음의 값들은 전부 ''가 없어야 합니다.
CKEDITOR.dtd.$removeEmpty['i'] = false;
config.enterMode = CKEDITOR.ENTER_BR;
config.fillEmptyBlocks = false;이렇게요.
-
Paul
2015.05.04 09:56
죄송하지만 ^^ 3번 팁을 적용하면 모두 공백문자를 제거하는데요. 만일 P태그에는 공백 문자를 자동으로 추가하게 하고, div에서만 제거하려면 어떻게 해야 하나요? 죄송합니다. 자주 질문을 드려서요.... 인터넷을 뒤져 봤지만 원하는 대답을 찾기가 쉽지 않네요... 감사합니다. -
prologos
2015.05.04 18:30
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-fillEmptyBlocks
살펴보니엘리먼트 활용이 가능하네요. 아래처럼 지정하시면 'div'일때만 공백문자를 추가 하지 않습니다.
config.fillEmptyBlocks = function( element )
{
if ( element.name == 'div' )
return false;
} -
Paul
2015.05.05 05:51
말씀해주신 대로 해보니 잘 됩니다. 정말 감사합니다. 덕분에 이제 ckeditor 가 마음에 드네요. ^^ 다시한번 도와주셔서 너무너무 감사드립니다!!! 꾸벅~ -
포세이돈
2016.06.23 14:59
안녕하세요. 저도 좀 문의 좀 할게요. ckeditor를 쓰고 있는데요. hwp 한글 파일에서 글을 복사하면 굵은 글씨나 색깔들이 다 없어져 버리고 일반 텍스트 형태로 복사가 되네요. 그런데 MS WORD의 내용을 복사를 하면 형식이 그대로 복사가 됩니다.
한글도 ms word처럼 형식이 그대로 옮겨 오도록 설정이 가능한지요?
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| file 모듈 insertFile() manual_insert 시 디렉토리생성 에러 문제 해결 방법 | onTrust | 2019.01.02 |
| 모듈에서 무조건 JSON/XML 형식으로 출력하기 [1] | Devel0per | 2015.04.03 |
새글/업데이트/이미지/동영상/첨부파일 아이콘 없애기
[18]
 | 老姜君 | 2008.11.21 |
| 무료 psd, html 탬플릿, 아이콘 사이트공유합니다. | 허허길드짱 | 2018.11.27 |
| act로 다른 페이지 보여주기 [1] | 이온디 | 2018.07.25 |
| 단축url API 사용하시는 분들... | 미스터강 | 2018.06.01 |
|
확장변수값 계산하여 게시판 리스트에 출력하기(총계 게시판)
[1]
| klaist | 2009.11.30 |
| PHP 뮤텍스 락 설치법(memcached 활용) [1] | 에이트 | 2018.09.03 |
| PHP 뮤텍스 락 설치법(redis 활용) | 에이트 | 2018.09.11 |
| 위젯 가운데 정렬 하는법 [3] | 불금 | 2015.07.05 |
|
요즘 제가 jquery 웹앱 솔루션을 개발했습니다.
[2]
| 안드류KIM | 2018.04.03 |
| 썸네일 방식으로 이미지 원본 주소 가져오기 | 에이트 | 2018.08.22 |
| 다른 서버 간 서브도메인 쿠키 공유 | 에이트 | 2018.08.04 |
| DB를 손쉽게 관리 [1] | EISOFT | 2018.07.15 |
| CKEditor 이용시 몇가지 유용한 설정 [11] | prologos | 2015.05.02 |
|
Google 스프레드시트에서 구글 번역으로 XE 다국어 내용 만들기(Lang.xml 용도)
| 달빛늑대 | 2018.07.17 |
| Code-Highlighter 3.0.83 가로 스크롤바를 어디론가 보내 버리고 싶으신 분. | 달빛늑대 | 2018.07.16 |
|
[수정]알림센터 Lite에 메일발송 기능을 추가하기
[11]
| 매실茶 | 2013.11.25 |
| 고정도메인 host 변경하기 | 해피정닷컴 | 2016.03.11 |
|
도메인 변경 또는 설치 폴더 변경시 이미지 주소변경하기
| 해피정닷컴 | 2018.06.08 |
좋은 팁 감사합니다.
아래와 같이 5가지를 설정하고 확인해 본 결과, 원래 있어ㅆ던 2가지는 재대로 되는데,
올려주신 3가지가 전혀 변동이 없습니다.
(물론 설정 후 관리자 페이지에서 캐시파일 재생성했습니다)
무슨 이유일까요?
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
config.language = 'en';
config.uiColor = '#DAEDF6';
CKEDITOR.dtd.$removeEmpty['i'] = 'false';
config.enterMode = 'CKEDITOR.ENTER_BR';
config.fillEmptyBlocks = 'false';
};