HTML5 텍스트 편집

HTML5 텍스트 편집

 

기존에 텍스트 편집이 불가능한 요소들까지 텍스트 편집이 가능하도록 지정할 수 있습니다.

 

contenteditable 속성

contenteditable 속성은 특정 요소의 내용을 편집할 수 있도록 지정하는 역할을 수행합니다.

만약 contenteditable 속성값을 지정하지 않고 contenteditable 속성만을 지정한다면 자동으로 true의 의미를 갖습니다.

contenteditable 속성의 값

값	설명
true	편집 가능을 의미함
false	편집 불가능을 의미함
inherit	부모 요소로부터 생성됨을 의미함

예제

<script type="text/javascript">   window.onload = function( )  {       var  editor = document.getElementById("editor");       // editor 요소에 contenteditable 속성이 부여되어 있으면 해당 영역에 포커스를 지정함       if (editor.isContentEditable)       {            editor.focus( );       }   }; </script> <div  id = "editor"  contenteditable></div>

 

designMode 속성

designMode 속성은 페이지 전체에 편집 속성을 부여하고자 할 때 사용합니다.

designMode 속성의 값으로는 on, off 두 가지를 지정할 수 있으며, 편집을 가능하게 지정하기 위해서는 on 으로 지정하고 편집이 불가능하게 하기 위해서는 off 로 지정해 줍니다.

 

예제

<script type="text/javascript">   window.onload = function( )   {       document.designMode = "on";   }; </script>

 

execCommand() 메서드

execCommand() 메서드는 contenteditable 속성이나 designMode 속성을 사용하여 편집이 가능하도록 지정한 상태에서 execCommand() 메서드를 사용하여 다양한 텍스트 편집을 할 수 있습니다.

 

형식

document.execCommand (commandId,  showUI,  value)

예제

document.execCommand ("bold",  false,  false);

execCommand() 메서드는 document 객체에 속해 있으며 세 개의 인수를 지정합니다.

① 첫 번째 인수인 commandId 값은 선택한 텍스트 영역에 대한 명령을 지정합니다.

② 두 번째 인수는 첫 번째 지정한 commandId에 대한 UI 를 표시할지 여부를 지정합니다.

③ 세 번째 인수는 commandId가 필요로 하는 추가 정보를 지정합니다.

 

텍스트 편집 관련 메서드

메서드	설명
queryCommandEnabled (commandId)	지정한 명령어를 실행할 수 있는지의 여부를 반환함
queryCommandIndeterm (commandId)	지정한 명령어의 효과가 일정한가의 여부를 반환함
queryCommandState (commandId)	지정한 명령어의 상태를 반환함
queryCommandSupported (commandId)	지정한 명령어가 지원되는지의 여부를 반환함
queryCommandValue (commandId)	지정한 명령어의 현재 값을 반환함

commandId 값

값	설명
bold	선택한 문자열을 굵은 글씨체로 변경함
createLink	선택한 문자열을 하이퍼링크로 변경함
delete	선택한 문자열이나 커서 앞의 문자를 삭제함
formatBlock	선택한 문자열을 지정한 태그로 감싸줌 세번째 인수 : 삽입할 태그를 지정함
forwardDelete	선택한 문자열이나 커서 뒤의 문자를 삭제함
insertImage	커서가 위치한 곳에 이미지를 삽입함 두번째 인수 : 이미지를 불러올 대화상자 생성 여부 지정함 세번째 인수 : 두번째 인수의 값이 false 일 경우 불러올 이미지의 주소를 지정함
insertHTML	커서가 위치한 곳에 HTML 삽입함 세번째 인수 : 삽입할 HTML 코드를 지정함
insertLineBreak	커서가 위치한 곳에 줄바꿈을 삽입함
insertOrderedList	커서가 위치한 곳에 순서 있는 리스트를 삽입함
insertUnorderedList	커서가 위치한 곳에 순서 없는 리스트를 삽입함
insertParagraph	커서가 위치한 곳에 단락을 삽입함
insertText	커서가 위치한 곳에 문자를 삽입함 세번째 인수 : 삽입할 문자를 지정함
italic	선택한 문자열을 이탤릭체로 변경함
redo	undo 재샐행
selectAll	모든 컨텐츠를 선택함
subscript	선택한 문자열을 아래첨자로 변경함
superscript	선택한 문자열을 윗첨자로 변경함
undo	실핼 취소함
unlink	선택한 문자열에 적용된 하이퍼링크를 제거함
unselect	선택 취소함
vendorID-customCommandID	브라우저 제작사별로 명령어를 지정함

 

텍스트 편집 실습 프로그램