step1 툴을 클릭하면 textarea에 문자가 삽입됨
1. 이벤트를 걸 툴 요소들을 가져온다.
const tools = document.querySelectorAll('.tool');querySelectorAll로 다 가져와서,
tools.forEach(tool => tool.addEventListener('click', toolHandle));forEach문을 돌리며, 이벤트 핸들러를 등록해주었다.
2. 문자를 삽입할 textarea 요소도 가져온다.
const editorText = document.querySelector('#editor-text');3. 드디어 문자 삽입
editorText.value = 'test';잘 들어간다.
step2 커서 위치에 글자 삽입
1. selectionStart
selectionStart로 커서가 시작되는 위치를 알 수 있다.
커서 시작점 전후로 문자를 자르고, 중간에 해당 마크다운을 삽입하면 된다.
editorText.value = textVal.slice(0, start) + md1 + txt + md2 + textVal.slice(start);2. 글자 삽입 후 textarea에 포커스 주기
editorText.focus();3. 마지막에 커서 위치까지 설정!
커서 위치를 설정하는 메서드로 setSelectionRange(시작, 끝)가 있다.
editorText.setSelectionRange(start + md1.length, start + md1.length + txt.length)'코드를 입력하세요' 같이 설명 텍스트 부분이 드래그 되게 시작과 끝 위치를 설정했다.
step 3 드래그하고 툴을 선택했을 때
이때는 설명 텍스트를 넣지 않고, 드래그된 텍스트 앞뒤로 마크다운 문자를 삽입했다.
if (start === end) {
} else {
}커서였는지 드래그였는지 if문으로 체크했다. selectionStart와 selectionEnd가 같다면 드래그된 텍스트는 없었을 것이다.
마무리
이후,
1. 툴을 재클릭했을 땐 마크다운 문자 제거
2. 드래그한 텍스트에 마크다운 문자가 포함되어 있을 땐?
위와 같이 여러 경우를 테스트해보며, 경우에 따라 editorText.value 값과 setSelectionRange()의 인수를 조금씩 다르게 주었다.
코드펜에 올려둔 건 step3까지 완성한 형태다.
