[클립북] 에디터 개발

목표 :

1. 에디터 기능을 완벽 구현합니다.(프리뷰).

2. 보안과 관련된 이슈를 해결합니다.

 

1. 에디터 기능을 완벽 구현합니다.(프리뷰).

 

1-1). 에디터 기능(사전지식)

에디터를 구현하기 위해 필요한 2가지 개념을 알아보겠습니다.

 

1-1-1). contenteditable="true" - Attribute(속성) 태그

contenteditable 전역 특성은 사용자가 요소를 편집할 수 있는지 나타내는 열거형 특성입니다.
MDN - https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/contenteditable

contenteditable

1-1-2). bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);

HTML 문서가 designMode로 전환되면 문서에서 execCommand 메서드를 사용할 수 있게 되는데 이것을 이용해서 문서의 편집 가능한 영역을 변경할 수 있습니다. 대부분의 명령어는 문서의 선택 영역에 영향(볼드, 이탤릭 등)을 미치고 나머지는 새 요소를 추가(링크 추가)하거나 전체 줄에 영향(들여쓰기)을 미칩니다. contentEditable을 사용할 때에execCommand()를 호출하면 현재 활성화된 편집 요소에 영향을 미칩니다.
MDN - https://developer.mozilla.org/ko/docs/Web/API/Document/execCommand

Document.execCommand()

2가지 모두 위 모질라 도큐먼트를 참조하여 사용법을 충분히 숙지한 후 적용할 것을 추천한다.

특히, document.execCommand의 함수의 매개변수는 편집하고자 하는 속성에 따라 종류(type)와 값이 설명되어 있으므로 각 매개변수를 테스트 해보면서 실제 구동여부를 확인하는 것이 좋습니다.

 

1-2). 프리뷰 구현

contenteditable="true"는 속성 태그를 지정하는 순간 디자인 편집모드로 전환하기 때문에 프리뷰 기능이 자동 설정이 된다고 생각하면 되고, contenteditable="true"는 속성을 지정한 태그의 innerText가 아닌 innerHTML을 획득하여, 태그 내부 컨텐츠 뿐만 아니라 태그 코드를 포함한 컨텐츠를 획득하고 저장 및 관리를 진행하면 됩니다.

<button id="bold">bold</button>
<div id="editor" contenteditable="true" style="width: 300px; height: 300px;"></div>
<button id="get-data">get tag<button>

<script>
	const btnBold = document.querySelector("#bold");
    const editor = document.querySelector("#editor");
    const btnGetData = document.querySelector("#get-data");
    
    btnBold.addEventListener("click", function(e) {
    	// document 전체중 contenteditable="true" 속성인 태그에 선택된 편집영역에만 해당 명령어가 적용됩니다.
    	document.execCommand("bold");
    });
    
    btnGetData.addEventListener("click", function(e) {
    	// innerText가 아닌 innerHTML로 적용된 태그 모두를 가져와서 활용한다.
    	const tag = editor.innerHTML;
    	console.log(tag);
    });
</script>

 

2. 보안과 관련된 이슈를 해결합니다.

2-1). 보안관련 문제 해결

테스트 한 결과 태그내에 문제가 되는 코드등이 삽이 될 수 있는데, 실제 관련 속성은 유효성 체크 없이 그대로 입력하면 됩니다. 코드 자체를 편집모드에서 기재할 경우 순수 텍스트 형태로 변경되어 document.execCommand 명령어로 적용된 태그와는 별개로 관리되며, 작성된 태그를 그대로 불러와 화면에 적용할 경우 document.execCommand의 명령어로 적용된 태그만 태그로 인식하여 표기되는 것을 확인 하였습니다. 크게 걸리는 보안 이슈는 해킹코드 삽입, 악성 스크립트 삽입 등 이였으나, 위와 같이 삽입된 코드가 텍스트로 인식되어 큰 이슈가 없는 것 같습니다. 하지만 그럼에도 미리 작성된 태그를 복사하여 스크립트를 적용하는 방법도 가능하기 때문에, 복사하여 데이터를 옮길경우 클립보드에서 태그 전체가 아닌 순수 텍스트 데이터만을 가져올 수 있도록 아래와 같은 내용의 함수를 추가하였습니다.

let paste = (e.clipboardData || window.clipboardData).getData('text');
// 선택된 객체 조회
const selection = window.getSelection();
if (!selection.rangeCount) return false;
selection.deleteFromDocument();
selection.getRangeAt(0).insertNode(document.createTextNode(paste));

 

 

위와 같은 이슈를 모두 마무리하여 아래와 같이 원하는 영역에 에디팅 기능을 적용할 수 있는 리액트 라이브러리를 아래와 같이 개발하였습니다. 텍스트만 전용으로 편집가능하며, 색상, 사진업로드, 링크 등 추후 필요한 관련 기능을 지속적으로 업데이트 할 예정입니다.

 

클립북 - 텍스트 에디터