반응형 스마트 에디터 (스킨에서 JS 이용) > 그누보드5 팁자료실

그누보드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'));
        });
    });
});
추천
10

댓글 7개

전체 2,412 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT