리치 텍스트 에디터 'Ngen' 개발
프로젝트 주소
https://github.com/devpnal/ngen
개발 기간
2024.01.02. ~ 2024.01.11. (추후 지속 업데이트 예정)
개발 분야
- 웹 프론트엔드 (CSS+JS)
개요
사용자가 각종 도구를 이용하여 서식있는 글을 작성할 수 있게 도와주고, 작성한 서식 있는 글을 HTML 파일로 반환해주는 역할까지를 하는 가장 기본적인 형태의 리치 텍스트 에디터입니다. 각 문단은 <p> 태그로 생성되며, 두 번 이상의 줄바꿈이 있지 않는 이상 <br> 태그로 줄바꿈 처리를 하고 문단을 새로 만들지 않도록 처리했습니다.
실제 사용자는 Ngen에서 제공하는 CSS파일과 JS 파일을 html 파일 내에 import 한 후, 빈 <div> 태그 하나를 넣어주면 가장 기본적 형태의 에디터를 구현할 수 있습니다. 에디터의 각 부위는 별도의 ID를 가지고 생성되어 웹디자이너가 원하는 대로 CSS 파일로 크기와 색상을 수정할 수 있습니다.
개발된 부분
제목 글 (H1 ~ H3)
본문 글
굵은 꼴
기울임 꼴
밑줄
취소선
순서 없는 목록
순서 있는 목록
이미지 첨부 기능
링크 추가 기능