개요
※ 위 에디터는 실제로 동작하는 샘플이다. 사용해보자
페이스북이나 트위터, 각종 댓글창, 채팅 어플 등에 사용되곤 하는 '일반적인 textarea에 가까운데 해시태그나 멘션 등에만 스타일이 들어가는 에디터'를 쉽고 간단하게 구현해보자.
아이디어
최대한 간단하게 만들기 위한 아이디어는 아래와 같다.
평범한 div를 contenteditable 설정으로 우선 에디터로 만든다
해당 div의 모든 스타일을 똑같이 적용한 화면 표시용 div를 또 하나 만들어서 겹친다
에디터 div의 내용이 갱신될 때마다 화면 표시용 div도 갱신한다
이렇게 해서 실제로 편집하고 있는 내용에 스타일을 붙여서 겹쳐버리면 사용자 눈에는 스타일이 적용된 엘리먼트를 편집하고 있는 듯이 보이고 게다가 구현도 획기적으로 간단해진다!
구현
구현체는 이 글 맨 위에서 이미 봤을테고.. 별다른 내용 없이 간단한 프로토타입이니까 그냥 바로 소스를 확인하자
See the Pen mini-editor by LazyGyu (@lazygyu) on CodePen.
기타
소스에 대한 설명을 작성하고 싶었지만 막상 쓰려고 보니 귀찮으므로 자세한 내용은 생략한다.