이미지 노드 타입 – contenteditable.lab

스키마 정의

이미지 노드 타입의 스키마 정의:

{
  image: {
    inline: true,
    attrs: {
      src: { default: '' },
      alt: { default: '' },
      title: { default: null },
      width: { default: null },
      height: { default: null }
    }
  }
}

모델 표현

모델 표현 예제:

{
  type: 'image',
  attrs: {
    src: 'https://example.com/image.jpg',
    alt: '설명',
    width: 800,
    height: 600
  }
}

HTML 직렬화

모델을 HTML로 변환:

function serializeImage(node) {
  const attrs = {};
  if (node.attrs.src) attrs.src = escapeHtml(node.attrs.src);
  if (node.attrs.alt) attrs.alt = escapeHtml(node.attrs.alt);
  if (node.attrs.title) attrs.title = escapeHtml(node.attrs.title);
  if (node.attrs.width) attrs.width = node.attrs.width;
  if (node.attrs.height) attrs.height = node.attrs.height;
  return '<img' + serializeAttrs(attrs) + '>';
}

HTML 역직렬화

HTML을 모델로 파싱:

function parseImage(domNode) {
  return {
    type: 'image',
    attrs: {
      src: domNode.getAttribute('src') || '',
      alt: domNode.getAttribute('alt') || '',
      title: domNode.getAttribute('title') || null,
      width: parseInt(domNode.getAttribute('width')) || null,
      height: parseInt(domNode.getAttribute('height')) || null
    }
  };
}

뷰 연동

뷰 연동 노트: 이 노드 타입을 뷰 레이어에서 구현할 때 contenteditable 동작, 선택 처리, 이벤트 관리에 특히 주의하세요.

뷰 연동 코드:

// 이미지 렌더링
const img = document.createElement('img');
img.src = node.attrs.src;
img.alt = node.attrs.alt || '';
if (node.attrs.title) img.title = node.attrs.title;
if (node.attrs.width) img.width = node.attrs.width;
if (node.attrs.height) img.height = node.attrs.height;
img.contentEditable = 'false'; // 이미지는 일반적으로 편집 불가

// 이미지 업로드 핸들러
function handleImageUpload(file) {
  const reader = new FileReader();
  reader.onload = (e) => {
    insertNode({
      type: 'image',
      attrs: {
        src: e.target.result,
        alt: file.name
      }
    });
  };
  reader.readAsDataURL(file);
}

일반적인 문제

일반적인 함정: 이 노드 타입을 구현할 때 자주 발생하는 문제들입니다. 구현 전에 주의 깊게 검토하세요.

일반적인 문제 및 해결 방법:

// 문제: 이미지 로딩 오류
// 해결: 깨진 이미지 처리
img.onerror = function() {
  this.src = 'placeholder.jpg';
  this.alt = '이미지 로드 실패';
};

// 문제: 이미지 크기 조정
// 해결: 종횡비 유지
function resizeImage(img, maxWidth, maxHeight) {
  const ratio = Math.min(maxWidth / img.width, maxHeight / img.height);
  img.width = img.width * ratio;
  img.height = img.height * ratio;
}

// 문제: 이미지 선택
// 해결: contenteditable에서 이미지 선택 처리
function selectImage(img) {
  const range = document.createRange();
  range.selectNode(img);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

구현

완전한 구현 예제:

class ImageNode {
  constructor(attrs) {
    this.type = 'image';
    this.attrs = {
      src: attrs?.src || '',
      alt: attrs?.alt || '',
      title: attrs?.title || null,
      width: attrs?.width || null,
      height: attrs?.height || null
    };
  }
  
  toDOM() {
    const img = document.createElement('img');
    Object.assign(img, this.attrs);
    return img;
  }
  
  static fromDOM(domNode) {
    return new ImageNode({
      src: domNode.getAttribute('src') || '',
      alt: domNode.getAttribute('alt') || '',
      title: domNode.getAttribute('title') || null,
      width: parseInt(domNode.getAttribute('width')) || null,
      height: parseInt(domNode.getAttribute('height')) || null
    });
  }
}