[에디터] CKeditor4.x 에디터 툴바 고정하기

페이지 정보

yadolee 루루아빠 4,300 1 2016.05.24 01:32:05

짧은주소

  • https://yadolee.com/tip/414 주소복사

본문

CKeditor4.x 에디터 사용시 본문이 길 경우 툴바 메뉴를 사용하기 위해 마우스 휠을 사용해야 하는 수고스러움이 있다.
그 수고스러움을 덜어보자

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;
}
0
추천인
  • 추천해 주세요
yadolee
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,349,522
레벨 101
경험치 1,527,452

Progress Bar 41.1%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

  • 최신댓글이 없습니다.

댓글1

루루아빠님의 댓글

yadolee
루루아빠 글쓴이 2016.06.01 01:35
상기 소스를 이용하는 것보다 플러그인을 활용하는 게 더 효과적이였다. http://ckeditor.com/addon/fixed 상기 애드온을 다운 받아 소스를 plugin.js 를 아래 소스롤 덮어 씌워 사용하자 



CKEDITOR.plugins.add( 'fixed', {
    init: function( editor ) {
      editor.on('instanceReady', function (readyEvent) {
        if (CKEDITOR.toolbarFixer == undefined) {      // To prevent double activation - event listener and its handler should be set only once
          CKEDITOR.toolbarFixer = function toolbarFixerF(event) {
            for(var i=0; i document.body.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;

              toolbar.style.width = content.offsetWidth + "px";
              toolbar.style.top = "0px";
              toolbar.style.left = "0px";
              toolbar.style.right = "0px";
              toolbar.style.margin = "0 auto";
              toolbar.style.boxSizing = "border-box";

              if (editor.offsetTop <= scrollvalue && (editor.offsetTop + editor.offsetHeight) > (scrollvalue + toolbar.offsetHeight + 100)) {
                toolbar.style.position = "fixed";
                content.style.marginTop = toolbar.offsetHeight + "px";
              } else {
                toolbar.style.position = "relative";
                content.style.marginTop = "0px";
              }
            }
          };
          CKEDITOR.toolbarFixer.ckeRootNodes = [];
          window.addEventListener('scroll', CKEDITOR.toolbarFixer, false);
        }
        CKEDITOR.toolbarFixer.ckeRootNodes.push(readyEvent.editor.container.$);
        readyEvent.editor.container.$.getElementsByClassName('cke_top').item(0).style.zIndex = 100;    // For codemirror plugin compatibility
      });
    }
});

Total 769 건｜15／26 페이지

 태그
제목 글쓴이 날짜 조회 추천
이윰  🏆 🎞️ Input 관련 버튼과 이윰 버튼 정렬 맞추기 루루아빠 2015.11.17 3.0k 0
그누•영카트  🏆 영카트 5.3.1.9 패치 shadow2fox 2018.10.19 2.5k 0
PHP  🏆 PHP Warning: Invalid argument supplied for foreach() 해결책 shadow2fox 2018.11.11 2.2k 0
제로  🏆 카테고리/페이지 상관없이 공지는 무조건 보이게 루루아빠 2006.05.26 3.8k 0
이윰  🏆 🎞️ 그누보드 5.17, 영카트 5.16 대응 테마 패치 루루아빠 2015.11.18 3.3k 0
그누•영카트  🏆 그누보드 5.3.2.0 패치 shadow2fox 2018.11.22 2.3k 0
DB  🏆 MYSQL 유저 추가 및 삭제 야돌이 2006.05.28 3.2k 0
이윰  🏆 🎞️ Eyoom Builder 1.1.16 패치 루루아빠 2015.11.19 3.6k 0
그누•영카트  🏆 영카트 5.3.2.0 패치 shadow2fox 2018.11.22 2.4k 0
그누•영카트  🏆 영카트 5.4.5.2 shadow2fox 2021.03.17 1.6k 0
DB  🏆 MYSQL root 비번 분실시 해결방법 야돌이 2006.05.28 3.6k 0
그누•영카트  댓글+1개🏆 🎞️ 접근차단 IP, 접근가능 IP로 인해 홈에 접근 불가될때 루루아빠 2015.11.21 3.3k 0
이윰  🏆 마우스 오버시 이전글 다음글에 제목을 띄우기 shadow2fox 2018.11.27 2.6k 0
DB  🏆 MYSQL에서 DB 백업 및 복구 방법 야돌이 2006.05.28 3.5k 0
이윰  댓글+2개🏆 회원 프로필 사진 변경시 바로 갱신하여 보여 주기 shadow2fox 2018.12.04 3.1k 0
제로  🏆 선택한 게시글은 목록 제목에서 진하게 표시하기 루루아빠 2006.05.29 3.9k 0
그누•영카트  🏆 🎞️ 그누보드 5.1.8 패치 루루아빠 2015.11.25 3.0k 0
제로  댓글+3개🏆 한글 이름이 들어간 이미지나 동영상 익스 설정없이 보여주기 루루아빠 2006.06.01 3.6k 0
그누•영카트  🏆 🎞️ 영카트 5.1.7 패치 루루아빠 2015.11.25 2.9k 0
그누•영카트  🏆 영카트 5.4.5.3 shadow2fox 2021.04.05 1.6k 0
기타  🏆 🎞️ 윈도우 서버를 위한 하드 링크와 심볼릭 링크 루루아빠 2015.11.29 2.9k 0
그누•영카트  🏆 🎞️ 그누보드 5.1.9 패치 루루아빠 2015.12.07 5.0k 0
jQuery  🏆 클릭 함수가 더블 클릭시에만 작동된다면 shadow2fox 2018.12.11 2.2k 0
제로  🏆 아파치1.x 버젼을 위한 설정 루루아빠 2006.06.01 3.7k 0
그누•영카트  🏆 🎞️ 영카트 5.1.8 패치 루루아빠 2015.12.07 3.1k 0
그누•영카트  🏆 영카트 5.4.5.4 shadow2fox 2021.05.04 1.9k 0
제로  🏆 코멘트 한번만 작성하게 하기 루루아빠 2006.07.01 4.1k 0
이윰  🏆 🎞️ Eyoom Builder 1.1.17 패치 (Start of the Season2) 루루아빠 2015.12.08 3.5k 0
제로  🏆 포인트 점수에 따른 자동 레벨업 루루아빠 2006.07.10 5.7k 0
이윰  댓글+1개🏆 이미지 리사이징 기능 끄기 (큰 이미지가 커졌다가 작아지는 문제 해결) 루루아빠 2015.12.18 4.6k 0
 태그
다음 페이지
이전 페이지

🏆 게시글 랭킹 탑10

랭킹 글내용 조회
1
특정 div의 내용을 일정 시간마다 새로고침하기
루루아빠 2016-03-20 06:24 		15.7k
2
영카트 5.3.2.9
shadow2fox 2019-05-30 00:39 		12.2k
3
button으로 유튜브 재생 및 정지 제어하기 댓글 +1개
루루아빠 2017-02-21 19:12 		10.4k
4
그누보드 5.4.4 댓글 +2개
shadow2fox 2021-01-05 10:58 		9.3k
5
jQuery를 이용한 링크 자동 클릭(auto click) 댓글 +2개
루루아빠 2015-06-27 02:19 		9.0k
6
CKeditor 4.x 소스 보기시 자동으로 공백 태그( ) 추가되는 문제 해결하기 댓글 +1개
루루아빠 2016-05-20 21:53 		8.2k
7
[PHP 7.2.x] count(): Parameter must be an array or an object that implements Countable 에러 해결하기 댓글 +1개
shadow2fox 2020-03-09 14:37 		7.2k
8
modal 오픈시 modal-dialog 아래 background body 스크롤 안되게 하기
루루아빠 2015-07-16 00:05 		7.2k
9
이윰빌더와 그누보드 패치시 수정할 파일들
루루아빠 2015-06-23 19:13 		7.0k
10
영카트 5.0.41 패치
루루아빠 2015-07-13 14:53 		6.8k