[에디터]모바일 스마트에디터 사용하기 > 그누보드팁

[에디터]모바일 스마트에디터 사용하기

페이지 정보

작성자 유토하우스
댓글 0건 조회 479회 작성일 23-04-28 08:54

첨부파일

smarteditor2_uto.zip (1.1M)
0회 다운로드 | DATE : 2023-04-28 08:55:35

본문

안녕하십니까?

유토하우스 유토맨입니다

일단 모바일에서도 스마트에디터 적용하기는 sir 작은별님, ㅇrㅎH님, 신비언니 글 참고, 감사합니다.

1. config.php 에서 아래의 상수를 찾아 false 를 true 로 변경합니다.

define('G5_IS_MOBILE_DHTML_USE', true);

2. plugin > editor > smarteditor2 > css > ko_KR > smart_editor2.css

1) 스마트에디터 반응형

아래 소스 추가

#smart_editor2{margin-right:1px !important;min-width:100px !important}
@media screen and (max-width: 640px){
#smart_editor2 .se2_text_tool ul:nth-child(4n){clear:both;}
#smart_editor2 .se2_text_tool ul{margin-bottom:4px}
#smart_editor2 .se2_text_tool ul:nth-child(n+4){margin-bottom:0}
#smart_editor2 .se2_text_tool .se2_multy,#smart_editor2 .se2_text_tool .se2_multy button, #smart_editor2 .se2_text_tool .se2_multy button span{height:54px}
}
@media screen and (max-width: 515px){
#smart_editor2 .se2_text_tool ul:nth-child(3n){clear:both;margin-left:4px}
#smart_editor2 .se2_text_tool ul:nth-child(6n),#smart_editor2 .se2_text_tool ul:nth-child(4n){clear:none;margin-left:0}
#smart_editor2 .se2_text_tool ul:nth-child(n+3){margin-bottom:0}
}
@media screen and (max-width: 370px){
#smart_editor2 .se2_text_tool ul:nth-child(2n){clear:both;margin-left:4px}
#smart_editor2 .se2_text_tool ul:nth-child(3n){clear:both;margin-left:4px}
#smart_editor2 .se2_text_tool ul:nth-child(6n),#smart_editor2 .se2_text_tool ul:nth-child(4n){clear:none;margin-left:0}
#smart_editor2 .se2_text_tool ul:nth-child(n+3){margin-bottom:0}
#smart_editor2 .se2_text_tool .se2_multy,#smart_editor2 .se2_text_tool .se2_multy button, #smart_editor2 .se2_text_tool .se2_multy button span{height:79px}
}
@media screen and (max-width: 325px){
#smart_editor2 .se2_text_tool .se2_multy,#smart_editor2 .se2_text_tool .se2_multy button, #smart_editor2 .se2_text_tool .se2_multy button span{height:29px;}
#smart_editor2 .se2_text_tool .se2_multy{border-bottom:1px solid #e0dedf}
}

2) 모바일 스마트에디터에서 사진크기 화면크기에 맞추기

56번째줄에 요렇게 추가해줍니다.

#smart_editor2 .se2_content_loading img{position:absolute;top:50%;left:50%;margin:-27px 0 0 -27px;max-width:100%; height:auto}

3) 98번째 줄에 @use 일반 포토 tag 생성 그 밑에
var sTag = '<img src="{=sOriginalImageURL}" title="{=sName}" >'; 를
var sTag = '<img src="{=sOriginalImageURL}" title="{=sName}" style="max-width:100%; height:auto;">';
이렇게 바꿔주세요