Frontend

2022/05/23 위지윅 에디터란?

괴발새발자 2022. 5. 23. 20:31

위지윅(WYSIWYG)이란?

What You See Is What You Get의 줄임말로, 보이는대로 결과물이 출력되는 것을 의미한다.
따라서 위지윅 에디터는 에디터에 입력한 텍스트 그대로 결과물이 적용되는 것이다.
(그런 점에서 Tistory에디터는 WYSIWYG 구현이 제대로 안될 때가 많다. 특히 리스트 구현시 에디터로 본 줄 간격과 발행한 포스트의 줄 간격에 차이가 난다.)

참고자료 :

  • https://blog.hubspot.com/website/best-wysiwyg-html-editor
  • https://sorrow16.tistory.com/223

 

WYSIWYG Editor in React

리액트에서 쉽게 구현할 수 있는 위지윅 에디터에 대해서 알아보았다.

CKEditor
https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html

  • 미리 정의된 build들을 여러가지 제공해서 마음에 들었다. (Classic, Balloon, Balloon Block, Inline, Document, Pagination). 특히 Balloon같은 경우 텍스트 입력할 때 띄우는 방식으로, 깔끔해 보여 사용하고 싶었다.
  • CK에디터는 씨티은행을 포함해 여러 대기업에서도 사용하는 솔루션이며, 홈페이지에서 나와있듯이 3천만 회 이상 다운로드, 수억 명의 사용자가 사용하는 '검증된 에디터'라고 한다. 더불어 쉽게 Callback함수를 지원해주기 때문에 파일 업로드(다중) 구현이 쉽다는 장점을 가진다고 한다. (https://tyrannocoding.tistory.com/67)
  • collaboration 기능으로 다른 유저와 함께 동시에 문서를 수정할 수 있다. suggestion 기능으로 텍스트 수정을 제안할 수 있다. 오 이건 짱이다! 생각하게 만드는 소개 영상 BGM은 덤.
  • 이밖에 다른 특징들은 이 페이지를 참고 (https://ckeditor.com/docs/ckeditor5/latest/features/index.html)
  • 연차가 있는 분이라 사용법과 관련해 많은 포스팅들이 존재한다.
  • 부푼 기대로 CKEditor를 사용해보고자 했으나 내 리액트 앱에서 모듈을 찾지 못하는 문제가 발생. 버전이 5까지 나오는 것으로 보아 업데이트 측면을 신경쓰는 것으로 보이는데 실제로 사용하지 못해서 아쉽다. 문제 해결하면 바로 사용해봐야지.


Quill Editor
https://quilljs.com/

  • API 주도적인 디자인으로, 기능별로 일일이 DOM을 고려할 필요가 없다.
  • 심플한 UI, 간편하게 설정만 바꿔 customizing 할 수 있다.
  • 사용자와 개발자, 크롬와 IE 모두를 고려한 cross flatform
  • 아무튼 왜 Quill을 써야 하는가? 사이트에 나와있다. (https://quilljs.com/guides/why-quill/)
  • 연차가 있는 분이라 사용법과 관련해 많은 포스팅들이 존재한다.
  • 3년째 업데이트가 이뤄지지 않고 있다. 심플함 측면에서 업데이트 필요성을 못 느끼는 것일까.


Toast Editor
https://ui.toast.com/tui-editor

  • 다른 익스플로러에서 범용적으로 사용할 수 있다. IE의 경우 11+에서만 사용 가능
  • NHN 주도 개발로 한국인 사용자들에게 편리할 수 있다. (업데이트 소식을 한글로 전해주니 아무래도 그렇겠죠.)
  • 아직 범용적으로 쓰이진 않아서 사용법에 대한 포스팅이 많지 않다.
  • 하지만 익히려면 간단히 익힐 수 있을 것 같다. (아무래도 한글 가이드가 있기 때문이겠죠.)
  • basic 외 plugin 기능들(chart, code syntax highlight: 개발자들에겐 좋을듯, color syntax, table 수정 기능 등)을 통해 정말 많은 기능을 제공한다는 것을 알 수 있다.
  • 마크다운 모드의 경우 미리보기 기능을 기본적으로 제공한다.

 

Editor 사용시 유의점

XSS : 사이트 간 스크립팅(또는 크로스 사이트 스크립팅, 영문 명칭 cross-site scripting, 영문 약어 XSS)은 웹 애플리케이션에서 많이 나타나는 취약점의 하나로 웹사이트 관리자가 아닌 이가 웹페이지에 악성 스크립트를 삽입할 수 있는 취약점이다. 주로 여러 사용자가 보게 되는 전자 게시판에 악성 스크립트가 담긴 글을 올리는 형태로 이루어진다. 이 취약점은 웹 애플리케이션이 사용자로부터 입력 받은 값을 제대로 검사하지 않고 사용할 경우 나타난다. 이 취약점으로 해커가 사용자의 정보(쿠키, 세션 등)를 탈취하거나, 자동으로 비정상적인 기능을 수행하게 할 수 있다. 주로 다른 웹사이트와 정보를 교환하는 식으로 작동하므로 사이트 간 스크립팅이라고 한다. (위키백과)
참고자료 : https://nordvpn.com/ko/blog/xss-attack/

  • CKEditor and Security : https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#security XSS 이슈 측면에서는 사용자가 Server Side에서 직접 관리를 해줘야한다. source mode를 사용 금지하고 contentPreview 기능을 사용해서(For example, if you enabled the source mode in the editor and an unaware user uses it with malicious HTML, the preview plugin will directly display this content in the browser, causing an XSS attack.) XSS 공격을 완화하도록 추천하고 있다.
  • Quill and XSS : https://security.snyk.io/vuln/SNYK-JS-QUILL-1245047 Quill의 XSS 취약점에 대해 설명한 글. Quill js에서 관련 토론이 이루어졌으나 Quill 측에서 명확한 해결방안 제시하지 않은 것으로 보임. 위 링크 글에 의하면 XSS에 대한 대처 방안으로 사용자가 client-side script를 사용하지 못하게 하거나 유효하지 않은 요청은 리다이렉트, ?, &, /, <, > 기호 들을 다른 인코딩 방식으로 변환하기, 다른 IP 주소로 접근하는 동시 로그인 탐지, 콘텐츠 보안 정책(Content Security Policy) 를 사용 등을 제안함.
  • Toast and XSS : https://ui.toast.com/weekly-pick/ko_monthly_202006 관련 내용 "Toast에디터에서는 XSS(Cross Site Scripting)를 발생시킬 수 있는 태그, 속성, 속성 값을 가지는 텍스트 값을 새니타이징하는 기능을 제공합니다. 아래 예제와 같이, onerror, src="javascript:" 등 일부 속성을 사용할 때 XSS가 발생하는 문제가 있었는데, 2.2.0 버전에서 에디터에서 내장하고 있는 기본 HTML 새니타이저 모듈을 고도화하여 XSS 취약점 문제를 해결하였습니다." Toast 측에서 XSS 예방을 위한 기능을 위해 노력하고 있는 것으로 보임.

 

이밖에 참고하면 좋을 글들

  • 두 에디터 이야기 (Quill vs ProseMirror) : https://jheo.io/blog/a-tales-of-two-editor/
  • 5 best open-source WYSIWYG editors for React : https://www.kindacode.com/article/popular-open-source-wysiwyg-editors-for-react/
  • Top 5 Rich TExt Editors for React in 2021 : https://blog.bitsrc.io/top-5-rich-text-editors-for-react-in-2021-628fecf0f7e0
  • 기술 블로그 위한 contentEditable WYSIWIG 에디터 제작기: https://blog.dalgu.app/dev/2