[2015.11.9] 심플하게 구현한 WYSIWYG Editor, 에디터 기초 :: 소림사의 홍반장!

간단한 기능 정도만 구현 되어 있는데요.

 

공부도 할 겸 이를 기반으로 좀 더 기능을 확장해 보는것도 나쁘지 않겠네요~ㅎㅎ

  

 

 

 

javascript - 사용된 주요 함수 설명

 

- exexCommand

textarea_elem.execCommand('bold', false, null);

 

: textarea 나 contentEditable 속성을 true로 준 DIV에서 사용.

쉽고 깔끔하게 요소의 속성을 조절할 수 있음.

 

상세설명 참고 : https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

 

 

 

- queryselector

document.querySelector('.boldify').addEventListener('click', boldify);

 

: 간편하게 CSS 셀렉터로 요소를 가져오기 위해 사용함.

 jquery 셀렉터와 비슷하다고 보면 되겟군.

 

상세설명 참고 : http://www.w3schools.com/jsref/met_document_queryselector.asp

 

 

 

 

간단한 사용 예제 및 Demo

See the Pen WYSIWYG Editor by Akshay Nair (@phenax) on CodePen.


다른 카테고리의 글 목록

Dev. 웹/Front-end 웹개발을 위한 codepen 카테고리의 포스트를 톺아봅니다