ckeditor가 창을 새로고침 하는 경우 떨어져 있다가 위로 살짝 붙는 현상이 있습니다.
살펴보니 2가지 경우를 확인할 수 있었는데요.
ckeditor를 사용하는 곳은 모두 같은 현상이어서 팁에 올려봅니다.
하나는 ckeditor 툴바를 모두 사용하는 경우 아래쪽에 위치한 파일첨부 박스가 약 4px 움직이는 경우였고,
또 하나는 ckeditor 툴바를 간단모드가 아닌 기본모드로 해놓고 config.js를 통해 일부 툴만 간추려 사용하는 경우
원래의 툴바 높이에서 줄어든 툴바 높이만큼 위로 올라붙는 현상이 있습니다.(원래는 3단입니다만 간추려서 1단 또는 2단 정도로 사용하는 경우가 많습니다.)
그냥 무심코 볼땐 잘 모를수 있습니다만 전 무척 거슬립니다.
사실 ckeditor 툴바는 사용하지 않는 툴이 거의 대부분이라 모두 올려놓고 쓰기엔 효율성 극히 낮아지게 되죠.
요즘같이 사용자 대부분이 모바일을 이용하고 있어서 툴바 공간도 많이 차지하고
너무 많아서 오히려 이용하는데 불편하다보니 가급적 필요한 것만 추려서 쓰는 곳이 많습니다.
첫번째는 해결방법이 간단합니다.
게시판 가장 상위 css파일에
div[id^="ckeditor_instance_"] { padding-bottom: 4px; }
.xefu-container { margin: 0; }
이렇게 넣어주면 4px 움직임이 사라집니다.(윤삼님 답변글 참조)
*추가 : 24년 초에 릴리즈되는 2.1.11버전에서는 반영되어 수정이 된다고 합니다만 스킨별로 다를수 있는 부분은 class명 참조해서 수정이 가능하도록 변경했다고 하니 참조 부탁드려요.(기진곰님 확인)
두번째로 툴바를 간략하게 하는 경우(물론 이 경우 간단모드로 해놓고 사용하면 됩니다만
그렇지 않고 기본모드를 사용하는 경우에 해당합니다.)
이건 editor모듈에 있는 editor.html 파일을 수정해야 해서 곤란하신 분들은 안해도 됩니다.
기존의 config.js 에서 툴바를 간추린 경우 툴바 높이가 변하면 튀는 현상도 높이만큼 같이 발생합니다.
관리자페이지에서 에디터 설정을 기본->간단으로 변경한 후
editor.html 파일의 185번라인쯤에 있는 // Define the simple toolbar. 주석 아래에 있는 코드를 수정하면 됩니다.
추가하고 싶은 툴이나 빼고싶은 툴 모두 이곳에서 변경해주면 됩니다.
간단모드지만 더 많이 추가해줄수도 있고 더 많이 빼 줄수도 있습니다.
디폴트 모드에도 추가 해봤지만 마찬가지로 튀더군요. 그래서 심플(간단)모드 밖에 답이 없는 것 같았습니다.
editor파일에 직접 입력해주면 툴바 높이 변경에 따른 튀는 현상을 막을 수 있습니다.
(단, 라이믹스 버전 변경시 같이 수정을 해줘야 하는 불편함이 있습니다.-별도로 파일 복사해놓고 필요시 해당부분 수정해주면 됩니다.)
(xe컴포넌트의 경우 아래와 같이 한줄 추가해주면 됩니다.)
{ name: 'xecomponent', items: [ 'emoticon', 'poll_maker', 'map_components' ] }
-----------
팁이라고 올리긴 하지만 한편으론 걱정도 되네요.
이런 경우 팁이 될 수도 있고, 아니면 더 좋은 팁이 있는데 확인 없이 올리는 경우도 있거든요.
모쪼록 후자의 경우라도 좋게 봐주세요~