CKeditor4.x 툴바를 상단에 고정하기 위해 기존 게시물에 언급했던 내용은 동일하지만 2번이 추가되고 소개한 플러그인은 사용치 않는다.

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. config.설정이 있는 적당한 곳에 아래 소스를 추가한다. - 이 설정값이 핵심

    //The dimensions for which the editor resizing is enabled - 에디터가 옆으로 늘어나는 문제 해결
    config.resize_dir = 'vertical';        //both, vertical, and horizontal

3. 동일 폴더 contents.css 를 열어 다음 스타일을 추가한다.

/* 긴 글 작성시 툴바 고정 - 추가 시작 */
.cke_top {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    will-change: top;
}
/* 추가 끝 */

댓글에 소개했던 Ckeditor 플러그인 http://ckeditor.com/addon/fixed 는 몇가지 문제점이 있어 사용치 않는다.