동하아빠

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

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

 

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개

이런게 정말 팁이네요...감사합니다..
감사합니다. 시도해봐야겠네요
감사합니다. 복잡하지 않고 좋아보여요!
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

+
제목 글쓴이 날짜 조회
5년 전 조회 3,613
5년 전 조회 4,380
5년 전 조회 3,222
5년 전 조회 4,311
5년 전 조회 4,491
5년 전 조회 3,345
5년 전 조회 4,194
5년 전 조회 6,881
5년 전 조회 5,061
5년 전 조회 3,561
5년 전 조회 6,491
5년 전 조회 3,195
5년 전 조회 4,776
5년 전 조회 5,161
5년 전 조회 5,148
5년 전 조회 4,130
5년 전 조회 3,475
6년 전 조회 4,289
6년 전 조회 1.7만
6년 전 조회 3,834
6년 전 조회 5,212
6년 전 조회 5,207
6년 전 조회 6,268
6년 전 조회 4,103
6년 전 조회 2,947
6년 전 조회 3,563
6년 전 조회 3,509
6년 전 조회 8,970
6년 전 조회 3,787
6년 전 조회 3,592