CKeditor4.x 에디터 툴바 고정하기 ‹ Web Server Tip

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

페이지 정보

루루아빠 3,935 1 2016.05.24 01:32:05

짧은주소

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

평점

평점 : 0점 (0명 참여)

본문

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;
}

추천인

추천해 주세요

루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,332,008

레벨 100

경험치 1,486,514

Progress Bar 5.05%

- 가입일 : 2015-03-04 03:24:54

- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!

- 자기소개 : 루루의 자랑 루루아빠랍니다~~

글쓴이의 최신글
글쓴이의 최신댓글

루루아빠 글쓴이 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
      });
    }
});

상기 소스를 이용하는 것보다 플러그인을 활용하는 게 더 효과적이였다.

http://ckeditor.com/addon/fixed

상기 애드온을 다운 받아 소스를 plugin.js 를 아래 소스롤 덮어 씌워 사용하자
{code:js}
/*
*   Plugin developed by Netbroad, C.B.
*   Improved by Argon
*
*   LICENCE: GPL, LGPL, MPL
*   NON-COMMERCIAL PLUGIN.
*
*   Website: netbroad.eu
*   Twitter: @netbroadcb
*   Facebook: Netbroad
*   LinkedIn: Netbroad
*
*/

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<CKEDITOR.toolbarFixer.ckeRootNodes.length; ++i) {
              var editor = CKEDITOR.toolbarFixer.ckeRootNodes[i];
              var content = editor.getElementsByClassName('cke_contents').item(0);
              var toolbar = editor.getElementsByClassName('cke_top').item(0);
              var scrollvalue = document.documentElement.scrollTop > 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
      });
    }
});
{/code}

번호	제목	글쓴이	날짜	조회
342	🏆 IE11에서 JWplayer7.x 가 로딩되지 않는 Setup timeout error 해결책	루루아빠	2016.06.01	4,932
341	🏆 webkit-transform 스타일이 마우스 오버시 보이는 flickering 증상 해결하기	루루아빠	2016.05.26	3,122
열람중	댓글+1개🏆 🚩 CKeditor4.x 에디터 툴바 고정하기	루루아빠	2016.05.24	3,936
339	댓글+1개🏆 Jwplayer 7.X 타이머 팁의 플레이 타임이 세로로 나타날 때 해결책	루루아빠	2016.05.21	2,909
338	댓글+1개🏆 게시글 본문 내에 첨부된 이미지가 엑박으로 뜨는 경우 특정 이미지로 대체하기	루루아빠	2016.05.21	3,520
337	🏆 CKeditor4.x 이미지 첨부시 에디터에 맞게 반응형으로 만들기	루루아빠	2016.05.21	4,534
336	🏆 영카트 5.1.18 패치	루루아빠	2016.05.17	2,849
335	🏆 그누보드 5.1.18 패치	루루아빠	2016.05.17	2,651
334	🏆 영카트 5.1.17 패치	루루아빠	2016.05.17	3,679
333	🏆 그누보드 5.1.17 패치	루루아빠	2016.05.17	3,136
332	🏆 이윰레벨을 사용치 않고 그누레벨만 사용하기	루루아빠	2016.05.17	2,975
331	🏆 모달(modal) 슬라이드 다운 슬라이드 업 효과 없애기	루루아빠	2016.05.13	3,754
330	🏆 📸 여분필드를 활용한 간단한 게시판 입력 서식 만들기	루루아빠	2016.05.13	3,545
329	🏆 게시글 본문에 태그가 포함된 경우 검색시 그대로 노출되는 문제 해결	루루아빠	2016.05.13	2,609
328	댓글+1개🏆 SELF-HOSTED로 Jwplayer7.x 사용시 외부 링크(jwpcdn.com)에서 스킨 가져오는 문제	루루아빠	2016.05.11	4,209
327	🏆 본문 내용 추출시 특정 태그 제거하기	루루아빠	2016.05.09	3,048
326	🏆 모달창(Modal Window) backdrop(모달창 바깥 부분) 클릭시 모달창 닫지 않기	루루아빠	2016.05.06	3,602
325	🏆 영카트 5.1.16 패치	루루아빠	2016.04.23	2,672
324	🏆 그누보드 5.1.16 패치	루루아빠	2016.04.23	2,728
323	🏆 Eyoom Builder 1.2.4 패치	루루아빠	2016.04.23	2,761

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

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

페이지 정보

짧은주소

평점

본문

추천인

댓글1

루루아빠님의 댓글

Total 762 건｜22／39 페이지

🏆 게시글 랭킹 탑10

Statistics

Information

Contact Us