---

220529

---

간단한 텍스트 에디터 만들기

---

1. 기본 UI를 제작합니다.
2. 요소가 편집 가능해야합니다.
3. 버튼을 눌렀을 때 뭔가 기능이 동작해야합니다.
   1. 드래그를 통해 우리가 선택한 노드가 무엇인지 파악할 수 있어야합니다.
   2. 기능1 : 선택한 노드의 한 줄이 통으로 스타일이 바뀌는 기능
   3. 기능2 : 선택한 노드만 바뀌는 기능

---

crossorigin="anonymous"란?

• Cross-Origin Resource Sharing

  - 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

명시적으로 보여주는데 의의가 있다.

<article id="app">
        <ul class="options">
            <li>
                <button type="button" data-command="h1">H1</button>
            </li>
            <li>
                <button type="button" data-command="h2">H2</button>
            </li><li>
                <button type="button" data-command="h3">H3</button>
            </li><li>
                <button type="button" data-command="p">P</button>
            </li><li>
                <button type="button" data-command="bold"><i class="fa-solid fa-bold"></i></button>
            </li><li>
                <button type="button" data-command="italic"><i class="fa-solid fa-italic"></i></button>
            </li><li>
                <button type="button" data-command="underline"><i class="fa-solid fa-underline"></i></button>
            </li><li>
                <button type="button" data-command="strikethrouth"><i class="fa-solid fa-strikethrough"></i></button>
            </li><li>
                <button type="button" data-command="justifyleft"><i class="fa-solid fa-align-left"></i></button>
            </li><li>
                <button type="button" data-command="justifyright"><i class="fa-solid fa-align-right"></i></button>
            </li><li>
                <button type="button" data-command="justifycenter"><i class="fa-solid fa-align-center"></i></button>
            </li>
            <li>
                <button type="button" data-command="justifyfull"><i class="fa-solid fa-align-justify"></i></button>
            </li>
        </ul>
        <div class="editor" contenteditable="true">
            <h1>나만의 wysiwyg 에디터</h1>
            <p>hello world</p>
        </div>
    </article>

#app{
    overflow: hidden;
    border: 1px solid #590696;
    border-radius: 10px;
}

.editor {
    min-height: 150px;
    padding: 10px;
}

.options {
    display: flex;
    padding: 8px;
    margin: 0;
    list-style-type: none;
    border-bottom: 1px solid #590696;
    background-color: #37e2d5;
}

.options li:nth-child(4n) {
    margin-right: 8px;
}

.options li button {
    background-color: #fbcb0a;
}

.options li button:hover{
    background-color: #c70a80;
    border-color: #c70a80;
}

        document.querySelectorAll('.options button').forEach(item => item.addEventListener('click', function () {
            const command = item.dataset.command;
            if (command === 'h1' || command === 'h2' || command === 'h3' || command === 'p') {
                // execCommand : 문서의 편집 가능한 영역에 명령을 내릴 수 있습니다.
                // 매개변수 : 1) 실행할 명령어 이름
                // 2) 명령에 따른 기본 UI 제공. 예전버전의 IE에서만 지원합니다.
                // 3) 명령에 필요한 변수
                // formatBlock : 현재 선택 영역이 있는 줄을 변경합니다. 변수 값으로 태그 이름을 넘겨줘야 합니다.
                document.execCommand('formatBlock', false, command);
            } else {
                document.execCommand(command);
            }
        }));

querySelector()

• .querySelector()는 CSS 선택자로 요소를 선택하게 해줍니다. 주의할 점은 선택자에 해당하는 첫번째 요소만 선택한다는 것이다.

forEach()

• 배열의 첫번쨰부터 마지막까지 반복하면서 item을 꺼낼수 있다.
• 배열의 요소들을 반복하여 작업을 수행할수 있다.

addEventListener()

• addEventListener()는 document의 특정요소(Id,class,tag 등등..) event(ex - click하면 함수를 실행하라, 마우스를 올리면 함수를 실행하라 등등.. )를 등록할 때 사용합니다.

execCommand()

• 전체줄에 영향을 준다.