[자바스크립트] 에디터 만들기(document.execCommand())

document.execCommand('속성');

HTML5 부터 지원되는 document.execCommand() 함수 입니다.

현재 선택영역의 텍스트를 인자로 받은 값을 통해 변환시킵니다.

(여기서 선택 영역이란 마우스로 텍스트를 드래그했을 때의 파란 박스 영역을 말합니다.)

document.execCommand('Italic')           // 기울이기
document.execCommand('Underline')        // 밑줄
document.execCommand('StrikeThrough')    // 중간줄
document.execCommand('Cut')              // 자르기
document.execCommand('Copy')             // 복사하기
document.execCommand('Paste')            // 붙혀넣기
document.execCommand('Undo')             // 실행취소
document.execCommand('Redo')             // 다시실행
document.execCommand('insertorderedList')    // 글번호 매기기
document.execCommand('insertunorderdList')   // 글머리 매기기
document.execCommand('outdent')          // 내어쓰기
document.execCommand('indent')           // 들여쓰기
document.execCommand('justifyleft')      // 왼쪽정렬
document.execCommand('justifycenter')    // 가운데정렬
document.execCommand('justifyright')     // 오른쪽정렬

(document.execCommand() 에 대한 더욱 자세한 정보 링크)

예를들어 아래의 코드는

<input type="button" value="B" onclick="document.execCommand('bold')" />

클릭하면 선택 영역의 텍스트를 <b></b>태그로 감싸게 됩니다.

<div>의 contenteditable="true" 속성 

아래 코드는 <div>를 <textarea>처럼 사용할 수 있게 해줍니다.

<div contenteditable="true">

사용 예시입니다.

html 코드가 아래와 같고

<div class="buttons">
    <input type="button" class="BOLD" value="B" onclick="document.execCommand('bold')" />
    <input type="button" class="ITALIC" value="Italic" onclick="document.execCommand('Italic')" />
    <input type="button" class="UNDERBAR" value="abc" onclick="document.execCommand('Underline')" />
    <input type="button" class="BAR" value="abc" onclick="document.execCommand('StrikeThrough')" />
    <input type="button" class="aignLeft" value="왼쪽 정렬" onclick="document.execCommand('justifyleft')" />
    <input type="button" class="aignCenter" value="가운데 정렬" onclick="document.execCommand('justifycenter')" />
    <input type="button" class="aignRight" value="오른쪽 정렬" onclick="document.execCommand('justifyright')" />
</div>
<div>
    <div class="editorDIV" contenteditable="true">
     </div>
    <div class="editorHTMLDIV">
    </div>
</div>
<div class="buttons">
    <input type="button" value="에디터로 보기" onclick="convertToEditor()" />
    <input type="button" value="HTML로 보기" onclick="convertToHTML()" />
</div>

자바스크립트가 아래와 같을 때

$(document).ready(function () {
    $('.editorHTMLDIV').hide();
});
 
//HTML코드로 보기
function convertToHTML() {
    $('.editorHTMLDIV').text($('.editorDIV').html());
    $('.editorHTMLDIV').show();
    $('.editorDIV').hide();
}
 
//에디터 화면으로 보기
function convertToEditor() {
    $('.editorDIV').html($('.editorHTMLDIV').text());
    $('.editorDIV').show();
    $('.editorHTMLDIV').hide();
}

실행 화면입니다.

document.execCommand() 를 사용하지 않고 window.getSelection() 를 이용해 선택영역을 찾아 처리하는 방법도 있습니다.

아래의 함수를 호출하면 선택 영역의 텍스트를 <b></b>태그로 감싸게 됩니다.

function fontBold() {
    //선택 영역 찾기
    var selected = window.getSelection().getRangeAt(0);
 
    //b 태그 생성
    var node = document.createElement('b');
    //b 태그 내부에 선택영역의 text 넣기
    node.innerText = selected;
 
    //선택영역을 지우고 생성한 b태그를 넣어 바꾸기
    selected.deleteContents();
    selected.insertNode(node);
}

이런 방식의 접근도 가능 합니다.