배포자료실의 Summernote 에디터를 아미나에 적용했을 때 iOS에서의 버그

Q & A

질답게시판

홈 > 회원포럼 > 질답/버그/제안
질답/버그/제안

배포자료실의 Summernote 에디터를 아미나에 적용했을 때 iOS에서의 버그

14 이니스프리 5 57

안녕하세요?


배포자료실에 올려주신 Summernote 에디터를 아미나에 적용했을 때 iOS에서의 버그와 관련하여 여쭤봅니다.


http://amina.co.kr/bbs/board.php?bo_table=skin_amina&wr_id=2126 



캡쳐한 사진에서처럼 아미나 최신버전에 Basic-board를 사용한 게시판에 Summernote 에디터를 적용 후 


아이폰 또는 아이패드에서 Summernote에서 전체화면으로 보기를 클릭하면 다음과 같은 문제가 발생합니다.


iOS는 최신버전으로 업데이트했고, 브라우저는 크롬 최신버전을 사용했습니다.


1. 부트스트랩 툴팁이 에디터 중간에 위치하는 경우가 있습니다(사진 1).


2. 전체화면 상태에서 게시판 글쓰기 스킨의 일부가 가끔 보이는 경우가 있습니다(사진 2).



1a97aa6df11cf221725d94aa5095416e_1565707350_7711.JPG
1a97aa6df11cf221725d94aa5095416e_1565707349_1661.JPG
 



제가 okky.kr과 Summernote 공식홈페이지에서도 테스트해봤는데 이런 유형의 문제를 발견하지 못했네요.


전자는 올려주신 것보다 더 낮은 버전(0.6대)을 사용하고 있는 것으로 확인했고,


공식 홈페이지에는 최신버전(0.8.12)을 사용하고 있습니다.


그리고 배포자료실에 올려주신 Summernote를 최신버전으로 업데이트하여도 아미나에서 유사한 증상이 발생하는 것을 확인했습니다.


혹시나해서 Summernote와 관련하여 구글링을 해보아도 특별히 이런 문제가 있다는 글을 찾지 못한 것으로 봐서는 


아미나에서 사용하는 자바스크립트와의 충돌이 아닐까 추측이 되어서 여쭤보네요.


참고로 iOS에서 사파리로 접속하면 큰 문제가 없는 것 같습니다.



한편 안드로이드폰의 크롬에서는 전체화면에서 상하로 스크롤했을 때 하단 일부에 글쓰기 스킨이 보이는 문제가 있긴 하지만 


이건 스크롤에 따라 규칙적으로 발생하는 증상이어서 상대적으로 큰 문제는 아닌 것 같습니다.


덧붙여 iOS에서 링크 추가 버튼을 눌렀을 때 나오는 부트스트랩 모달창에서 


'링크에 표시할 내용'을 적은 후 '이동할 URL'을 적으려고 하면 커서가 "새창으로 열기" 밑에 엉뚱한 공간으로 이동해버리는 버그가 있더군요.

(커서가 벗어나기는 하지만 입력 자체는 정상적으로 되기는 해요.)


그런데 이 문제는 okky.kr이나 Summernote 공홈에서도 마찬가지의 증상이 발생하는 것을 미뤄볼 때 


아마도 부트스트랩 모달 자체의 문제인 것 같네요.



프로알라, 스마트에디터, Redactor를 제외한 여러 에디터들이 전반적으로 iOS에서 문제가 많아서 아쉽네요 ㅠㅠ


okky.kr에서 Summernote를 꾸준히 사용하는 것으로 미뤄볼 때 Summernote가 괜찮은 에디터라는 생각이 들어서 


이 에디터를 버리지 못하고 계속 붙잡게 되네요.


혹시 이 문제를 해결할 수 있는 방법이 없는지 여쭤봅니다.


그럼 바쁘시겠지만 편안한 밤 되세요!


항상 감사드립니다 ^-^


5 Comments
M 한별아빠 08.14 19:29  
이건 만져봐야 뭐라도 체크될꺼라 당장 이야기 드리기는 어렵겠네요.ㅠㅠ
옙 바쁘신데 댓글 달아주신 것만으로도 감사합니다!
저도 여러 환경에서 더 테스트해보고, 비록 실력은 부족하지만 발견한 버그를 바로잡을 수 있도록 해볼게요~

한별아빠 님께서 아미나용으로 배포해주신 자료를 바탕으로 Summernote 0.8.12 최신버전 파일을 반영해서
iOS에서 엔터 입력과 관련된 문제도 PC 버전과 모바일 버전을 분리하는 방식으로 해결하고,
동영상 버튼 클릭한 후에 네이버TV, 카카오TV 등의 URL을 입력하면 바로 iframe 삽입되도록 하고,
링크파싱 등 소소한 기능을 몇 개 넣어봤는데요.
(길게 적었지만 사실 한별아빠 님께서 처음에 아미나에 적용해주신 것에 비하면 아무 것도 아닙니다 ㅠㅠ)

테스트 해보다가 우연히 iOS에서의 버그를 발견해서 회원자료실에 올리지 못하고 있네요 ㅜㅜ
아무래도 부트스트랩과 관련된 문제인 것 같은데요.
요즘에는 Summernote 배포판 중에서 부트스트랩을 사용하지 않는 버전도 있던데 이 파일로 다시 테스트해볼게요.

그럼 날씨가 무더운데 한별아빠 님께서도 가정에 건강이 함께 하시고, 뜻깊은 광복절 되시기를 기원합니다.
아미나 유저로서 매번 큰 도움을 받고 있어서 항상 감사드립니다!!
정확한 인과관계는 모르겠지만 현재까지 테스트한 바로는
다음과 같은 옵션을 추가하면 부트스트랩 툴팁과 관련된 문제가 나타나지 않는 것 같네요.
disableResizeEditor: true
M 한별아빠 08.15 00:23  
옵션명으로 봐서 저게 문제라면 브라우저 크기 변경하면 새로고침해야 할 듯...ㅠㅠ
옙 아직 안 주무셨군요!!
제가 테스트해보니 disableResizeEditor: true 옵션은 자동 리사이징에 관한 것은 아니고, 에디터 하단에서 드래그하여 에디터의 height를 조절할 수 있는 옵션 같아요.
부트스트랩이 적용된 상태여서 다행히 브라우저 크기를 줄이거나 늘려도 width는 반응형으로 잘 적용되는 것 같네요.
그리고 어차피 iOS에서 shortcut을 꺼야 한글 입력이 제대로 되어서(이 내용은 Github에 있더군요) 모바일용과 PC용을 따로 만들어서 게시판에 적용해야 될 것 같아요 ㅜㅜ

위 문제들(특히 부트스트랩 모달과 관련된 문제)이 혹시나 iOS에서 input 태그 등에서의 auto zoom과 관련된 것인지 해서 테스트해봤는데 이것과는 관련이 없네요.
그리고 아이폰에서 Summernote의 이미지 버튼을 누르면 부트스트랩 모달을 닫는 버튼이 화면 우측으로 짤려서 다시 화면축소를 해야되던데요.
(글을 쓸 때 이미지를 올리려고 생각했다가 마음이 바뀌는 경우가 있잖아요 ^^;)
이건 Summernote 공식홈페이지나 okky.kr에서도 마찬가지로 나타나는 문제여서 write.skin.php의 meta 태그에서 auto zoom을 끄는 방식 이외에는 해결책이 없는 것 같네요 ㅠㅠ

shortcut을 꺼야 iOS에서 한글 입력이 제대로 되고, resizeEditor를 꺼야 부트스트랩 툴팁이 제대로 나오고, Summernote가 그나마 커스텀하기 쉽다고 들어서 작업을 시작했는데 에디터란 것은 참 다루기 어려운 물건이란 것을 다시 한 번 깨달았네요 ㅜㅜ

그럼 편안한 밤 되시고 안녕히 주무세요!
다시 한 번 감사드립니다 ^^
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand