JS - command 실행 명령어

execCommand 명령을 이용하면 인라인 편집 요소에 원하는 HTML 문자열을 삽입할 수 있습니다. 이를테면, 이미지를 넣거나 글자 모양, 정렬, 색상 등 다양한 요소를 추가할 수 있습니다. 형식은 다음과 같습니다.

document.execCommand(command, userUI, value);

command 에는 다음 명령을 사용할 수 있습니다.

클립보드

명령어	설 명
copy	내용 복사
cut	내용 자르기
paste	내용 붙여 넣기
delete	선택영역 지우기
undo	살행 취소
redo	이전에 실행 취소된 명령을 다시 실행

정렬

명령어	설 명
justifyCenter	가운데 정렬
justifyFull	양쪽 정렬
justifyLeft	왼쪽 정렬
justifyRight	오른쪽 정렬

글꼴

명령어	설 명
backColor	선택한 영역의 배경색을 지정
foreColor	선택한 글자의 색상을 지정
hiliteColor	선택한 영역의 배경색을 지정
bold	선택한 글자의 글자를 굵게
fontName	선택한 글자의 글꼴을 지정
fontSize	선택한 글자의 크기를 지정
italic	선택한 글자의 이텔릭체를 지정
indent	선택한 글자의 들여 쓰기
outdent	선택한 글자의 내여 쓰기
increaseFontSize	선택한 글자를 굵게 (IE 지원불가)
decreaseFontSize	선택한 글자를 작게
superscript	선택한 글자의 윗첨자를 삽입
subscript	선택한 글자의 아래첨자를 삽입
underline	선택한 글자의 밑줄을 지정
strikeThrough	선택한 글자의 취소선을 지정

삽입

명령어	설 명
insertHorizontalRule	가로줄을 삽입
insertHTML	HTML 문자열을 삽입
insertText	텍스트 문자열을 삽입
insertImage	이미지를 삽입
insertOrderedList	선택한 요소의 순서가 있는 목록을 삽입
insertUnorderedList	선택한 요소의 순서가 없는 목록을 삽입
insertParagraph	문단 태그를 삽입
insertLineBreak	문단 태그를 삽입
createLink	선택한 요소에 링크를 삽입
unlink	선택한 요소의 링크를 제거
formatBlock	HTML 요소를 추가하거나 변경 변수 값에는 블록 요소을 넘겨야 하며, <span>태그 같은 인라인 요소는 추가 불가 (예 "H1", "P", "DL", "BLOCKQUOTE") Ex.) execCommand("formatBlock", false, "h1");
heading	제목 태그를 추가 변수 값에는 H1 ~ H6 의 제목 태그 이름을 넣음 Ex.) execCommand("heading", false, "H1");

기타

명령어	설 명
selectAll	인라인 편집 요소의 문서 전체 선택
removeFormat	인라인 편집 요소의 문서 전체 제거
contentReadOnly	문서를 읽기 전용으로 true | false 중 하나를 변수 값으로 넘겨야 함
forwardDelete	커서 위치 앞의 글자를 지움 (delete 키를 누른 것과 동일한 효과)
enableInlineTableEditing	표의 행과 열을 추가 삭제하는 명령 도구를 활성화(또는 비활성화)함. (IE 지원 불가)
enableObjectResizing	이미지나 조정이 가능한 요소의 크기 조정 도구를 활성화(또는 비활성화)
insertBrOnReturn	엔터키를 눌렀을 때 br 태그를 넣을지 두 개를 넣을지 제어 (IE 지원 불가)

fontColor

선택한 영역의 글자 색상을 설정합니다.

document.execCommand("fontColor", false, "red");

fontName

선택한 영역에 글자 모양을 설정합니다.

document.execCommand("fontName", false, "굴림체");

fontSize

선택한 영역의 글자 크기를 지정합니다.

document.execCommand("fontSize", false, "16px");

insertHTML

현재 위치에 HTML 문자열을 삽입합니다.

// value 값에 URL 을 입력합니다.
document.execCommand("insertHTML", false, "<h1>하보니</h1>");

insertImage

현재 위치에 새로운 이미지 태그를 삽입합니다. 이미지 URL을 변수 값으로 넘겨 주세요.

document.execCommand("insertImage", false, "http://example.com/img.png");

insertLineBreak

현재 위치에 새로운 문단을 넣습니다.

document.execCommand("insertLineBreak");

createLink, unlink

선택한 영역에 하이퍼 링크를 삽입하거나 제거합니다.

// value 값에 URL 을 입력합니다.
document.execCommand("createLink", false, "http://habonyphp.com");

// 선택한 영역의 링크를 제거합니다.
document.execCommand("unlink");

formatBlock

formatBlock 은 태그로 감싸는 모든 요소를 넣을 수 있습니다. 예를 들어 <p>, <div>, <blockquote> 등 텍스트를 감싸줄 수 있는 요소를 넣을 수 있습니다.

// 선택한 영역에 <h1> 태그를 삽입
document.execCommand("formatBlock", false, "h1");

// 선택한 영역에 <p> 태그를 삽입
document.execCommand("formatBlock", false, "p");