스마트에디터2 모바일형 커스텀 업그레이드 정보
스마트에디터2 모바일형 커스텀 업그레이드
첨부파일
본문
지난 https://sir.kr/g5_tip/17471 는 너무 설정 부분이 많아서 다시 올립니다.
링크게시글은 아예 없었던 것으로 하시고...
스마트에디터2를 처음 다운로드 받았던 상태에서 시작합니다.
----------
1. 먼저 config.php 에서 아래 부분을 찾아 true 로 변경합니다.
define('G5_IS_MOBILE_DHTML_USE', true);
----------
2. 첨부파일의 압축을 풀어 plugin/editor/smarteditor2 디렉토리로 업로드 합니다.
이것으로 그만입니다.
html 문서 딱 하나입니다.
이건 SmartEditor2Skin.html 인데 이 파일은 덮어씌우기가 됩니다.
그래서 혹시나 하는 분들은 예전의 SmartEditor2Skin.html 를 파일이름을 바꿔 백업해 놓으셔도 좋습니다.
----------
3. 보너스
스마트에디터로 글쓰기를 할 때 일정등급 이하의 회원에게는 에디터에서 이미지 업로드 권한을 주고 싶지 않을 때가 있습니다.
이 게시판에서 공유된 에디터를 쓰면 그 부분을 쉽게 설정할 수 있습니다.
write.php 에서 pc와 모바일 모두 <div class="write_div"> 이 부분을 찾아 그 상단에...
<script>
smarteditor2Upload = "<?php echo $member['mb_level'] < $board['bo_upload_level'] ? 'no' : 'yes'; ?>";
</script>
위의 코드를 넣어줍니다.
그럼 게스판 관리에서 정해준 파일업로드 권한과 동일한 권한으로 설정돠고
그 아래 레벨은 업로드 버튼 자체가 보이지 않습니다.
----------
4. https://sir.kr/g5_tip/17471 에서 3번에 입력된 코드가 있다면 삭제합니다.
----------
5. 모바일 글쓰기시 이미지가 너무 커지는 것을 방지하고 영역 안에서만 최대값을 가지게 하고 싶으면
아래 댓글에서 제가 도킴님께 달은 코멘트를 참고하세요.
----------
13
댓글 28개
지금 막 적용해 봤는데 잘 됩니다. 감사합니다.
548번줄에 아래 코드 추가
<li class="husky_seditor_ui_photo_attach last_child"><button type="button" title="사진" class="se2_photo_ico"><span class="_buttonRound tool_bg">사진</span></button>
</li>
그리고 <script>document.write(imgBtnChange)</script> 위에
<ul class="se2_multy"> 를 입력하니 사진 버튼이 정상적으로 표시 됩니다~
상단에서 다음과 같이 코드를 정의했는데...
imgBtnChange = heightMode ? "<ul id=se2Button class=se2_multy style=position:absolute;top:0px;right:0px;border:none>" : "<ul id=se2Button class=se2_multy>";
----------
즉 윈도우 창크기 세로길이가 가로길이보다 길 때는(모바일일때) 아래의 태그가 들어가고
<ul id=se2Button class=se2_multy style=position:absolute;top:0px;right:0px;border:none>
아니라면
<ul id=se2Button class=se2_multy> 가 들어가고 인데...
상단 선언을 보니 html5 가 아니라서 그런 것이지 알 수가 없네요.
그누 5.4 버전에 이 실험게시글은 닷홈을 쓰고 있어요.
여튼 수정하여 잘 나온다니 다행입니다.
감사히 사용 하겠습니다.
모바일앱(푸시앱?) 에서 사진도 불러올 수 있으면 좋겠습니다.
예 감사합니다
혹시...
모바일로 이미지를 첨부할때 큰사이즈는 조절이 안되어서 짤리잖아요?
혹시 그 문제는 어떻게 하면 해결할수 있을까요?
물론 모바일이나 pc나 사진 크기가 커지면 알아서 100퍼센트를 맞추는 건 어렵지 않지만 원본 이미지의 실제 크기가 어느 정도인지 아는 것이 더 중요하다고 보는데요?
원본 이미지의 사이즈를 에디터 안에서 글쓰기시 리사이징 하는 건 제가 생각하기에는 큰 의미가 없습니다.
꼭 필요하시다면 영역내 이미지의 width 를 영역보다 작으면 그 원본 사이즈로, 아니라면 100 퍼센트로 준다는 조건을 하나 주시면 됩니다만...
혹시 데스크탑에서도 이미지가 크면 잘리나요?^^:; 제가 32인치 4k를 사용하고 있어서 해상도상은 짤리기가 않았습니다.
제가 지금 만들고 있는 사이트가 사진을 올리는 게시판이 있는데 모바일에서 에디터가 안되어서 비타주리님께서 제공해주신 팁으로 에디터를 달았는데 글을 쓰는 과정에서 휴대폰의 사진을 올리면 생각보다 많이 짤리더라고요...
글쓰기 완료를 하면 일정크기로 보기좋게 줄어듭니다.
하지만 사진이 너무 짤리고 커서 중간중간 글쓰기를 할 때 불편함이 있어서 혹시 방법이 있는지 해서 여쭤봤습니다;;;
사실 제가 비타주리님 글을 보고 따라했는데 성공되어서 너무 이뻤습니다.
그런데 제가 실력이 안되어서 사실 역영내의 이미지 width를 어디서 주는건지를 모릅니다.ㅠㅠ 이곳저곳 찾아서 만져보겠습니다.
모바일에서 에디터를 사용할수 있는것만으로도 너무 좋습니다^^
감사합니다.
smarteditor2 폴더에 보면
smart_editor2_inputarea.html 이 있습니다.
다음의 부분을 찾아
<body class="se2_inputarea" style="height:0;-webkit-nbsp-mode:normal"></body>
</html>
아래처럼 바꿔줍니다. 그럼 pc건 모바일이건 글쓰기시 이미지크기가 영역밖을 넘어가지 않습니다.
<body class="se2_inputarea" style="height:0;-webkit-nbsp-mode:normal"></body>
<script>
smartImage = document.getElementsByTagName("img");
bodyWidht = document.getElementsByTagName("body")[0].offsetWidth - 20;
setInterval(function() { for (se2i = 0; se2i < smartImage.length; se2i++) smartImage[se2i].style.width = (smartImage[se2i].naturalWidth < bodyWidht ? smartImage[se2i].naturalWidth : bodyWidht) + "px"; }, 100);
</script>
</html>
뒤늦게 이글을 봤습니다.!!
잘 쓰겠습니다.