그누보드 - 반응형 스마트 에디터 (스킨에서 JS 이용)

그누보드5 팁자료실

반응형 스마트 에디터 (스킨에서 JS 이용) 정보

반응형 스마트 에디터 (스킨에서 JS 이용)

본문

스마트 에디터를 반응형 테마에서 아래의 화면처럼 사용하기 위해서는 약간의 수정이 필요합니다.

2009992035_1581033331.5071.png

검색해보시면 이미 반응형으로 수정해서 올려놓으신 버전들과 팁이 있습니다만..

게시판 스킨의 write.skin.php 파일에 JS 를 추가해서 하는 방법을 소개합니다.


$(document).ready(function () {
    $('#wr_content').next('iframe').on('load', function () {
        let iframe = $('#wr_content').next('iframe').contents();
        // 좁은 화면에서 툴바의 아이콘들이 스택형태로 될 수 있도록 수정
        iframe.find('#smart_editor2').removeAttr('style');
        iframe.find('#smart_editor2 .se2_text_tool ul').css('margin-bottom', '5px');
        // 칼라픽커가 툴 아이콘 위에 오도록 수정
        iframe.find('#smart_editor2 .se2_text_tool li').css('z-index', 'unset');
        iframe.find('iframe').on('load', function() {
            let edit_area = iframe.find('iframe').contents();
            // 에디터에서 큰 이미지 업로드시 리사이즈를 위한 CSS
            // 신비언니님의 팁 https://sir.kr/g5_tip/12126 참고
            $("<style type='text/css'>.se2_inputarea img{max-width:100%; height:auto} </style>").appendTo(edit_area.find('head'));
        });
    });
});