묻고답하기
CKEditor에서 "소스보기"에서 <p> 와 <p> 사이에 여백을 어떻게 없애나요?
2015.05.02 09:08
CKEditor 로 글을 작성 혹은 수정할 때 "소스보기(Source)"를 통해서 직접 tag 를 입력/수정하려고 하면, <p>와 <p> 사이마다 한 칸씩 여백이 떨어진 것을 볼 수 있습니다. 이 여백을 어떻게 없앨 수 있을까요? 저 같은 경우에는 자주 소스보기를 통해서 직접 tag 를 입력/수정 하는 경우가 많은데 문단마다 여백이 떨어지니 (짧은 글은 별 상관이 없는데) 긴 문장의 글인 경우 tag 보기가 영~ 어색해서 불편하게 느껴집니다.
XE 답변은, 자동으로 태그를 재정렬하는 내장된 기능이라고 하는데, 혹시 이 여백을 없앨 수 있는 방법을 아시는 분은 도움주시면 감사하겠습니다.
- [2018/02/12] 묻고답하기 레이아웃 테이블 여백(공백) 문제
- [2017/08/04] 묻고답하기 CKEditor에서 URL에 a태그가 자동으로 붙지 않게 하려면? *3
- [2016/07/04] 묻고답하기 CKEditor에 extraPlugins 설치 후 툴바가 나타나지 않는 현상? *3
- [2015/12/23] 묻고답하기 ckeditor 에서 SHIFT+ENTER 로 줄바꿈(BR)시 한글 깨짐 현상
- [2015/06/25] 묻고답하기 CKEditor에 "돌아가기" 버튼이 생겼는데 왜 그럴까요? *4
댓글 11
-
prologos
2015.05.02 11:00
-
Paul
2015.05.02 13:12
답변 감사드립니다. 저기... 그런데 어느 파일에 위의 내용을 추가해야 할까요? ^^;;
-
prologos
2015.05.02 16:28
https://www.xpressengine.com/tip/22992543
참고하세요. -
Paul
2015.05.02 16:56
감사합니다!! 필요한 기능들을 잘 요약해 주셨네요. 도움이 됐습니다. 감사합니다!!! -
마래바
2015.05.02 13:14
전 개인적으로는 각각의 <p> 태그간의 한 줄 생기는 것이 더 보기가 좋더군요.
어디까지가 한 문단인지 파악하기가 수월해서.. 사람들마다 조금씩 취향이 다르긴 하겠습니다.
-
Paul
2015.05.02 13:24
맞습니다. 개인적인 취향이 다 다르다보니... ^^ 그나저나 제가 말씀드리고자 한 것은 일반 "글쓰기 모드"가 아닌 "소스보기 모드"의 경우입니다. 그래서 저는 문단마다 한 칸씩 떨어진 것을 말하고자 한 것이 아니라, html tag 를 입력 또는 수정할 때에 <p>태그마다 한 칸씩 떨어져 있는 것을 말씀드린 것입니다. 즉 일반 글쓰기에서는 전혀 한 칸씩 떨어져 있지 않습니다. 소스보기를 통해서 봐야만 보이는 것입니다.
-
마래바
2015.05.02 15:01
네 해당 내용 알고 있습니다.
제 개인 취향이 독특해서, 일반보기, 소스보기 모두 문단을 띄어보기를 선호하는 편이라서요.. ^^;;
-
Paul
2015.05.02 16:54
아... 그러시군요. ^^ 혹시나해서 말씀드렸던건대... 말씀하신대로 취향이 다 다르니깐요. 답변 감사드립니다. ^^ -
Paul
2015.05.02 18:28
인터넷을 뒤져보니 저와 같은 이슈를 가진 사람들이 있었는데... 그런데 그 중 답글에 해결 방법을 제시한 사람이 있었습니다. 이걸 XE 1.8.1 에서는 어떻게 적용해야할지 도움을 주셨으면 좋겠습니다. 아래의 링크를 클릭하면 해당 이슈와 답글들을 볼 수 있습니다.
http://ckeditor.com/forums/Support/BUG-CKeditor-adds-new-line-and-tab-space-after-P-tag -
prologos
2015.05.02 19:26
아!! p태그 공백문자 문의가 아니고 라인이 추가되서 보이는 걸 말씀하신거군요. 질문을 잘못 이해 했었네요 @.@
처음 말씀 드렸던 config.js파일에 아래를 추가 해보세요.
CKEDITOR.editorConfig = function( config ) {
//개인 설정 값들
};//개인 설정 끝난다음 아래쪽에 아래 설정 추가
CKEDITOR.on( 'instanceReady', function( ev ) {
ev.editor.dataProcessor.writer.setRules('p', {
indent : false,
breakBeforeOpen : true,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : false
});
});저도 명확하게는 모르지만 대충 설명 드리자면...
'p'의 쓰기 룰을 정의하고
breakBeforeOpen : 태그 열기전 라인 변경
breakAfterOpen : 태그 열고난 후 라인 변경
breakBeforeClose : 태그 닫기전 라인 변경
breakAfterClose : 태그 닫은 후 라인 변경
의 상태를 설정하는 옵션 입니다.
-
Paul
2015.05.03 03:29
앗!!! 이제 되네요!!! 정말 감사드립니다!!! ^^ 여러가지 경우가 있어서 저의 질문에 대한 이미지를 첨부했어야 했는데 그렇게 못했습니다. 제가 잘못했다는 생각이 듭니다... 이렇게 관심 가지고 끝까지 답변해 주셔서 너무너무 감사드립니다. 꾸벅~ 꾸벅~
config.fillEmptyBlocks = false; 옵션 추가 해보세요