동하아빠

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

· 2020-02-07 (금) 08:55:59 · 7697 · 7

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

 

2009992035_1581033331.5071.png

 

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

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

 

[code]

$(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'));
        });
    });
});

[/code]

|

댓글 7개

2020-02-07 (금) 10:55:40
이런게 정말 팁이네요...감사합니다..
감사합니다.
오 감사합니다.
멋지네요~
감사합니다. 시도해봐야겠네요
감사합니다.
감사합니다. 복잡하지 않고 좋아보여요!
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
20-03-11 조회 7,384
20-03-09 조회 7,766
20-03-09 조회 5,875
20-03-05 조회 5,484
20-03-05 조회 6,318
20-03-03 조회 9,663
20-03-02 조회 6,483
20-03-02 조회 7,460
20-03-01 조회 2.9만
20-02-28 조회 6,010
20-02-26 조회 6,361
20-02-26 조회 6,094
20-02-24 조회 6,919
20-02-23 조회 5,661
20-02-20 조회 6,792
20-02-18 조회 7,017
20-02-18 조회 5,840
20-02-12 조회 6,606
20-02-11 조회 9,444
20-02-10 조회 7,598
20-02-09 조회 6,082
20-02-09 조회 9,106
20-02-08 조회 5,592
20-02-08 조회 7,349
20-02-08 조회 7,718
20-02-07 조회 7,698
20-02-06 조회 6,588
20-02-05 조회 5,953
20-02-04 조회 6,833
20-02-03 조회 1.9만