웹 에디터 버튼으로 이미지 이동

회사에서 작업 중인 과정을 공부하기 위해서
웹 에디터에서 버튼을 클릭하여 이미지를 한 칸씩 위로 / 아래로 이동시키는 기능을 만들어보았다.

contentEditable 속성을 사용하여 텍스트와 이미지를 추가할 수 있는 웹 에디터를 만들 수 있다.

    <div id="tool"></div>
    <input type="file" accept="image/*" class="img-input" />
    <div id="editor" contenteditable="true">
      <p>Hello</p>
    </div>

에디터 안에 이미지를 첨부하고, 이동시키고 싶은 이미지를 클릭할 때 상단에 '위로', '아래로' 이 #tool 안에 추가되도록 하였다. 에디터 내의 다른 부분을 클릭하면 이 버튼은 사라진다.

editor.addEventListener('click', function (e) {
  // 기존에 선택된 이미지가 있을 경우 초기화
  document.querySelector('.clicked')?.classList.remove('clicked');

  if (e.target.tagName == 'IMG') {
    const imgMove = document.createElement('div');
    imgMove.setAttribute('class', 'img-move-btn');
    imgMove.innerHTML = `
      <button type="button" data-move="up">위로</button>
      <button type="button" data-move="down">아래로</button>
    `;
    e.target.parentNode.classList.add('clicked');
    if (!tool.hasChildNodes()) {
      tool.appendChild(imgMove);
    }
  } else {
    tool.innerHTML = '';
  }
});

위로 / 아래로 버튼을 클릭했을 때
dataset 속성을 사용하여 현재 클릭된 버튼에 따라 이미지를 위 / 아래로 이동시킨다.

tool.addEventListener('click', function (e) {
  if (e.target.tagName == 'BUTTON') {
    const clickedImg = document.querySelector('.clicked');
    const direction = e.target.dataset.move;
    if (direction == 'up') {
      // previousSibling가 아닌 previousElementSibling를 사용해서
      // 공백, 줄바꿈 등을 포함하지 않는 '이전 엘리먼트'를 가져올 수 있음
      const prevElem = clickedImg.previousElementSibling;
      if (prevElem != null) {
        // editor.insertBefore(clickedImg, prevElem);
        prevElem.before(clickedImg);
      }
    } else {
      const nextElem = clickedImg.nextElementSibling;
      if (nextElem != null) {
        nextElem.after(clickedImg);
      }
    }
  }
});

 

이때 previousSibling을 사용하면 내가 원하는 이전 줄에 속해있는 엘리먼트가 아닌 공백이 캐치가 된다는 문제가 있었다. 비슷해서 헷갈렸는데, 이번 기회에 정확한 차이점을 알게 되었다. 
공백, 텍스트를 포함하지 않는 정확한 '이전 엘리먼트'를 가져오려면 previousElementSibling를 사용하자.