[스크랩] contentEditable 속성으로 인라인 텍스트 편집기 제작하기

인라인 편집기를 제작하는 일은 수고롭습니다. input이나 textarea 필드를 이용해 편집될 요소를 변경하는 작업부터 시작합니다. 사용자 경험이 자연스럽게 이어지도록 CSS를 부분적으로 사용해 변경된 요소 스타일을 변경 전의 스타일과 일치시켜야 합니다. 사용자가 편집을 마쳤으면, 다시 변경 전의 콘텐츠 전부를 복사한 후에 요소들을 바꿔주어야 하지요.

contentEditable 속성은 이 작업을 엄청 수월하게 해줍니다. 여러분이 할 일은 이 속성값을 true로 설정해 주는 것입니다. 그러면 표준 HTML5 요소들이 편집 가능한 상태가 됩니다. 이 튜토리얼에서는 이 기능을 기반으로 해서 인라인 리치 텍스트 편집기를 제작해 보겠습니다.

기본 사항

이 속성은 세 가지 적당한 값을 취합니다. 그 세 가지는 true와 false와 inherit입니다. true 값은 요소가 편집 가능한 상태임을 의미합니다. 빈 문자열도 true로 봅니다. false는 요소가 편집할 수 없는 상태임을 알려줍니다. inherit 값은 기본값입니다. inherit는 요소의 부모가 편집 가능한 상태라면 요소가 편집할 수 있게 된다는 것을 알려줍니다. 이는 여러분이 요소를 편집 가능하게 하면, 그 요소의 자식들과 특정 요소들이 편집할 수 있는 상태가 된다는 것을 의미합니다. 특별히 그 요소들의 contentEditable 속성을 false로 지정하지 않는 한 말이죠. 

자바스크립트를 이용해 이 값들을 동적으로 바꿀 수가 있습니다. 만일 새로운 값이 세 가지 값 중에 아무것도 맞지 않는다면 SyntaxError(구문 에러) 예외 처리를 해줍니다.

편집기 제작하기

여러분이 인라인 편집기를 제작하려면, 사용자가 무언가를 편집할 때마다 content Editable 속성값을 바꿔주는 능력이 필요합니다.

contentEditable 속성을 토글(toggleing)하는 동안에 현재 그 속성에 무슨 값이 들어 있는지 알아야 합니다. 그 값을 알아내는 데 isContentEditable 속성을 사용하면 됩니다. 만약에 isContentEditable이 요소에 대해 true를 반환하면 그 요소는 현재 편집할 수 있습니다. 그게 아니라면 편집할 수 없습니다. 작업할 문서에서 다양한 요소들의 상태를 알아내는 데 곧 이 속성을 사용할 것입니다.

편집기를 제작하는 첫 단계로 편집 상태를 토글하는 버튼과 편집 가능한 요소를 만들겠습니다.

1 2 3 4 5 6 7

<button id="editBtn" type="button">Edit Document</button>   <div id="editor">     <h1 id="title">A Nice Heading.</h1>     <p>Last Edited By - <span id="author">Monty Shokeen</span></p>     <p id="content">Some content that needs correction.</p> </div>

의도적으로 편집 가능한 상태를 준 요소마다 Id가 있습니다. 이는 변경된 내용을 저장하거나 각 요소에 있는 텍스트를 바꾸기 위해 값을 반환해야 할 때 유용합니다.

아래의 자바스크립트 코드는 내용을 편집하고 저장하는 일을 처리합니다.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

var editBtn = document.getElementById('editBtn'); var editables = document.querySelectorAll('#title, #author, #content')   editBtn.addEventListener('click', function(e) {   if (!editables[0].isContentEditable) {     editables[0].contentEditable = 'true';     editables[1].contentEditable = 'true';     editables[2].contentEditable = 'true';     editBtn.innerHTML = 'Save Changes';     editBtn.style.backgroundColor = '#6F9';   } else {     // Disable Editing     editables[0].contentEditable = 'false';     editables[1].contentEditable = 'false';     editables[2].contentEditable = 'false';     // Change Button Text and Color     editBtn.innerHTML = 'Enable Editing';     editBtn.style.backgroundColor = '#F96';     // Save the data in localStorage     for (var i = 0; i < editables.length; i++) {       localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);     }   } });

편집 가능한 요소 모두를 하나의 변수에 저장하는 데 querySelectorAll()을 이용합니다. 문서에서 이 메서드는 특정 선택자와 일치하는 모든 요소를 포함하는 NodeList를 반환합니다. 하나의 변수를 이용해 편집 가능한 요소를 파악하기 편한 방식입니다. 가령, 문서 제목은 editable[0]를 이용해 접근할 수 있습니다. 이는 우리가 다음에 할 작업이죠. 

다음에는 버튼의 클릭 이벤트에 이벤트 리스너를 붙입니다. 사용자가 Edit Document(문서 편집) 버튼을 클릭할 때마다 제목이 편집 가능한 상태인지를 확인합니다. 만일 편집 불가한 상태라면 각각의 편집 가능한 요소에 contentEditable 속성값을 true로 설정해줍니다. 더불어 'Edit Document(문서 편집)' 텍스트는 'Save Changes(저장하기)'로 바뀝니다. 사용자들이 부분적으로 편집하고 나서 'Save Changes(저장하기)' 버튼을 클릭하면, 변경된 내용은 영원히 저장됩니다.

제목이 편집 가능한 상태라면 편집할 수 있는 요소마다 contentEditable 속성값을 false로 설정합니다. 여러분은 이 시점에 나중에 불러올 용도로 서버에 문서 내용을 저장하거나 어느 곳엔가 존재하는 복사본과 변경된 내용을 동기화할 수 있습니다. 저는 이 튜토리얼에서 모든 값을 localStorage에 저장할 것입니다. localStorage에 값을 저장할 때 기존 값에 중복 저장되지 않도록 요소별로 Id를 사용하겠습니다.

라이브 CodePen 데모 보기

저장된 콘텐츠 불러오기

앞의 견본에서 요소에 변화가 생긴다면, 변경된 내용이 사라지는 것을 알아챌 것입니다. 저장된 데이터를 불러올 위치를 코드로 작성하지 않았기 때문입니다. 일단 내용이 localStorage에 저장되었다면, 사용자가 웹 페이지를 다시 방문할 때 그 데이터를 불러와야 합니다.

01 02 03 04 05 06 07 08 09 10 11 12 13 14

if (typeof(Storage) !== "undefined") {     if (localStorage.getItem('title') !== null) {     editables[0].innerHTML = localStorage.getItem('title');   }       if (localStorage.getItem('author') !== null) {     editables[1].innerHTML = localStorage.getItem('author');   }       if (localStorage.getItem('content') !== null) {     editables[2].innerHTML = localStorage.getItem('content');   } }

제목, 저자나 내용이 localStorage에 있는지 확인하는 코드가 위에 있습니다. 만약에 있다면 각 요소의 innerHTML에 불러온 값을 전달합니다.

CodePen 데모 보기

사용자 친화적인 편집기 만들기

인라인 편집기를 개선하기 위해서는 두 가지 변화를 주어야 합니다. 첫 번째는 편집 가능한 상태와 그렇지 않은 상태를 명확히 구분시켜야 합니다. 이는 CSS를 이용해 편집 가능한 요소의 디자인을 바꿔주면 됩니다. 관련된 요소의 서체와 색상을 바꾸는 것은 요령입니다.  [contenteditable="true"] 선택자는 contenteditable 속성이 true로 될 때마다 바뀐 스타일을 요소에 적용할 것입니다.

1 2 3 4

[contenteditable="true"] {   font-family: "Rajdhani";   color: #C00; }

두 번째 개선 사항은 데이터를 자동 저장하는 기능입니다. 5초마다 자동 저장하는 것처럼 다양한 방식으로 그 기능을 구현할 수 있습니다.

1 2 3 4 5

setInterval(function() {   for (var i = 0; i < editables.length; i++) {     localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);   } }, 5000);

keydown 이벤트마다 변경된 내용을 저장할 수도 있습니다.

1 2 3 4 5

document.addEventListener('keydown', function(e) {   for (var i = 0; i < editables.length; i++) {     localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);   } });

이 튜토리얼에서는 앞의 방식을 고수했습니다. 여러분의 프로젝트에서는 적절한 이벤트로 자동 저장을 실행하면 됩니다. 

CodePen 데모 보기

디자인 모드로 페이지 전체를 편집하기

웹 페이지에서 요소를 몇 개만 편집해야 할 때는 contentEditable이 유용합니다. 웹 페이지에서 콘텐츠 전체나 거의 모든 요소가 바뀌어야 할 때는 designMode 속성을 사용하면 됩니다. 이 속성은 문서 전체에 적용할 수 있습니다. 속성값을 on과 off로 바꾸기 위해서는 document.designMode = 'on';과 document.designMode = 'off';를 각각 사용하세요.

여러분이 디자이너이고 다른 누군가가 콘텐츠 제작자인 상황에 그 가치가 입증될 것입니다. 여러분은 디자인과 일부 텍스트 더미를 넘겨주겠죠. 그 후에 제작자들아 그것을 실제 콘텐츠로 대체하면 됩니다. designMode가 동작하는 것을 보기 위해 브라우저의 개발자 도구에서 콘솔 탭을 여세요. 콘솔에서 document.designMode = 'on';를 입력하고 Enter를 누릅니다. 이제 이 페이지에 있는 모든 것을 편집할 수 있습니다.

마무리하며

contentEditable 속성은 글을 신속하게 편집하거나 사용자가 단 한 번의 클릭으로 댓글을 수정하는 경우와 같은 상황에 편리합니다. 이 기능은 IE 5.5에서 처음 실행되었습니다. 그 후로 WHATWG에서 표준화했고요. 브라우저 지원 역시 꽤 괜찮습니다. 오페라 미니를 제외한 모든 주요 브라우저에서 이 속성을 지원하고 있습니다.

자바스크립트가 웹에서 동작하는 실질적인 언어 중 하나가 되었습니다. 학습이 필요하며 여러분을 정신없이 만들 프레임워크와 라이브러리들도 산재해 있습니다. 더 배우거나 작업에 사용해보려고 리소스를 더 찾고 있으면, Envato marketplace에서 가능한 리소스가 있는지 확인해 보세요.

이 튜토리얼에서는 contentEditable 속성의 기본 정보와 기본 인라인 텍스트 편집기를 제작하는 데 이 속성이 어떻게 쓰였는지 다루었습니다. 다음 튜토리얼에서는 툴바를 실행하고 리치 텍스트 편집 기능을 제공하는 방법에 대해 알려드리겠습니다.