[Html and Css] 웹에디터 쉽게 만들기

textarea를 통해서 글을 작성 할수 있는 공간을 많이 만드는데요.

textarea에서 작성된 내용은 데이터베이스에 저장될때 문자로만 저장될뿐 html 태그가 저장되지는 않죠.

하지만 contenteditable 속성을 위용하면 쉽게 div를 textarea 처럼 에디터 영역을 꾸밀수가 있죠.

사용법은 아래와 같아요.

<div contenteditable></div>

단순히 위와 같이 적어주시면 div 내에 타이핑이 가능하게 되면서 타이핑 된 내용은 자동으로 태그들이 만들어 집니다.

 

 

 

다음과 같이 테스트를 해보았는데요.

아래처럼 태그들이 자동으로 만들어져요.

 

div 내에서는 글씨굴게 처리와 같은 간단한 Ctrl+B 를 누른다면 이 또한 적용되요.

contenteditable 속성과 자바스크립트를 적절히 이용한다면 상용화된 에디터와 똑같이 만들수 있어요.

하지만 contenteditable 속성을 이용하는 방법에도 단점이 있는데요.

옛 브라우저에서는 정상적으로 동작 하지 않는다는거죠.

익스플로러 8 이상 버전부터 동작 해요.