스마트에디터2 모바일형 커스텀 > 그누보드5 팁자료실

그누보드5 팁자료실

스마트에디터2 모바일형 커스텀 정보

스마트에디터2 모바일형 커스텀

첨부파일

SmartEditor2MobileSkin.zip (12.7K) 41회 다운로드 2021-12-08 22:13:23

본문

 

업그레이드 되었습니다. - https://sir.kr/g5_tip/17497

 

-----------

 

냑에는 스마트에디터 모바일형에 대한 많은 팁들이 있지만 요즘 시간이 나서 그냥 제 방식으로 에디터를 커스텀해 보았습니다. 기본환경은 css 수정 등이 들어가지 않은 원래의 에디터를 전제로 합니다.

 

----------

 

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


define('G5_IS_MOBILE_DHTML_USE', true);

 

-----------

 

2. 첨부파일을 다운로드 받아 압축을 풀고

plugin/editor/smarteditor2 디렉토리로 업로드 합니다. html 문서 딱 하나입니다.

 

----------

 

3. pc 는 필요가 없고 모바일의 write.skin.php 의 가장 아래에 다음의 코드를 입력합니다.


<!--  스마트에디터2 모바일 옵션 시작 : wittazzurri -->
<script>
function mobileEditor() {
    mobileHtml = "<?php echo G5_URL; ?>/plugin/editor/smarteditor2/SmartEditor2MobileSkin.html"; 
    wr_content.nextSibling.onload = function() {
        if (this.src != mobileHtml) this.src = mobileHtml;
    }
}
document.addEventListener("DOMContentLoaded", mobileEditor);
</script>
<!--  /스마트에디터2 모바일 옵션 종료 : wittazzurri -->

 

----------

 

4. 반응형 스킨의 경우 위의 코드를 모바일 모드시에 이프문으로 걸어줍니다.

 

----------

 

5. 작동원리는 에디터 영역의 아이프레임이 온로드가 된 이후 모바일 모드가 감지되면

아이프레임의 src 를 바꿔치기 해버리는 이벤트를 사용하였습니다.

색상보드가 가려지는 현상도 없고 입력창 크기조절 글자를 중앙이 아니라 좌측으로 뺐습니다.

줄어들고 늘어나는 곳은 가운데 부분이라 특별한 지장은 없을 거에요.

 

31846119_1638969622.6367.jpg

추천
8

댓글 13개

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

회원로그인

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