[에디터] CKeditor4.x 에디터 툴바 고정하기
페이지 정보
루루아빠
4,234 1
2016.05.24 01:32:05
짧은주소
-
https://yadolee.com/tip/414 주소복사
본문
CKeditor4.x 에디터 사용시 본문이 길 경우 툴바 메뉴를 사용하기 위해 마우스 휠을 사용해야 하는 수고스러움이 있다.
그 수고스러움을 덜어보자
1. 그누보드5/plugin/CKeditor4.x/config.js 를 열어 소스 가장 하단 }; 바로 위쪽에 다음 소스를 추가한다.
그 수고스러움을 덜어보자
1. 그누보드5/plugin/CKeditor4.x/config.js 를 열어 소스 가장 하단 }; 바로 위쪽에 다음 소스를 추가한다.
window.CKEDITOR.on('instanceReady', function () {
var toolbar = document.getElementsByClassName('cke_top').item(0),
boxTop = toolbar.getBoundingClientRect().top,
offsetTop = 45; // toolbar offset top
window.addEventListener('scroll', function () {
window.requestAnimationFrame(function () {
var scrollTop =document.body.scrollTop;
if ((scrollTop + offsetTop) > boxTop) {
toolbar.style.top = scrollTop + offsetTop - boxTop + 'px';
} else {
toolbar.style.top = 0;
}
});
}, false);
});
2. 동일 폴더 contents.css 를 열어 다음 스타일을 추가한다.
.cke_top {
position: relative;
top: 0;
left: 0;
right: 0;
will-change: top;
}
추천인
레벨 101
경험치 1,519,107
Progress Bar 13.56%
- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS
BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑
루루아빠랍니다~~
-
3 유튜브 썸네일 생성 개선하기 +42019-10-12
-
button으로 유튜브 재생 및 정지 제어하기 +12017-02-21
-
1 CKeditor 4.x 소스 보기시 자동으로 공백 태그( ) 추가되는 문제 해결하기 +12016-05-20
-
1 특정 div의 내용을 일정 시간마다 새로고침하기2016-03-20
-
modal 오픈시 modal-dialog 아래 background body 스크롤 안되게 하기2015-07-16
-
영카트 5.0.41 패치2015-07-13
-
jQuery를 이용한 링크 자동 클릭(auto click) +22015-06-27
-
이윰빌더와 그누보드 패치시 수정할 파일들2015-06-23
최신댓글이 없습니다.


댓글1
루루아빠님의 댓글