React Quill에서 Image upload와 IE, iOS 대응하기

#React #Quill #Rich_Text_Editor #IE11 #iOS #ImageUpload

커뮤니티에서 React Quill 사용법에 대한 문의를 받아서 기록 차원에서 글로 남겨 둡니다.

Destkop/Mobile을 모두 지원하는 Rich Editor의 종류는 적습니다. 특히 한글 입력 문제가 없어야 하는데, 이 때 적합한게 Quill 입니다. React에서 사용하기 위해서는 React Quill을 사용합니다.


Custome Image Upload Handler

그런데 Quill에서 기본 image upload는 base64인코딩된 inline data string으로 처리됩니다. 그래서 custom image upload handler를 어떻게 처리하는지 궁금하실 텐데 검색해도 예제가 잘 안나옵니다.

Internet Explorer (IE) Support

그리고 Quill에서 한글을 입력하면 IE에서는 해괴하게 동작합니다. 줄바꿈을 하면 문장이 통채로 다음줄로 막 내려가고 그렇습니다. 그래서 여러 방지 코드가 필요하고요.

Mobile iOS Browser Support

마지막으로 iOS에서는 iOS가 키보드가 올라올 때 페이지를 위로 밀어 올리는 이상한 처리 때문에 엉뚱한 스크롤이 생기는 문제가 있습니다. 이 때는 Quill 에디터만을 남기고 나머지 레이아웃 요소를 숨겨줘야 합니다.


이 모든걸 정리해서 Code Sandbox로 만들어 두었으니 참고하시어 삽질을 줄이시기를 빕니다.

https://codesandbox.io/s/qv5m74l80w


React Quill에 대해 더 이야기 하고 싶으신 분들은 자바스크립트 개발자 포럼을 찾아주세요.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade