@makecode/text-editor

현대 웹 애플리케이션에서 풍부한 텍스트 편집 경험을 제공하기 위한 경량화되고 커스터마이즈 가능한 텍스트 에디터 패키지입니다.

주요 기능

• 리치 텍스트 편집: 굵게, 기울임, 밑줄, 제목, 인용문 등 다양한 기능 지원.
• 커스터마이즈 가능한 툴바: 툴바 명령과 스타일을 쉽게 수정 가능.
• ContentEditable 지원: 네이티브 contentEditable을 사용하여 매끄러운 텍스트 편집 경험 제공.
• 크로스 브라우저 호환성: 다양한 브라우저와 디바이스에서 일관된 동작 보장.
• 터치 지원: 모바일 디바이스를 위한 최적화된 터치 이벤트 처리 포함.

설치

npm 또는 yarn을 사용하여 패키지를 설치하세요:

npm install @makecode/text-editor
# 또는
yarn add @makecode/text-editor

사용법

기본 설정

애플리케이션에 에디터를 통합하는 간단한 예제:

import EditText from '@makecode/text-editor';

// 에디터 초기화
const editor = new EditText('#editor', {
  tooltip: true,
  classes: {
    link: 'custom-link-class',
  },
});

// 에디터 활성화
editor.on();

HTML 구조

HTML에 대상 요소를 포함해야 합니다:

<div id="editor" contenteditable="true"></div>

API

EditText 클래스

생성자

new EditText(target: HTMLElement | string | null, settings?: Partial<EditTextSettings>);

• target: 에디터를 적용할 대상 요소(또는 해당 선택자).
• settings: 선택적 설정 객체.

설정 옵션

| 옵션 | 타입 | 기본값 | 설명 | | --------- | --------- | -------------- | -------------------------------------- | | key | string | 'editor' | 에디터를 식별하기 위한 고유 키. | | tooltip | boolean | true | 툴팁 표시 여부. | | classes | object | { link: '' } | 에디터 구성 요소에 대한 커스텀 클래스. |

메서드

| 메서드 | 설명 | | ------- | ------------------------------------------- | | on() | 에디터를 활성화하고 필요한 이벤트를 바인딩. | | off() | 에디터를 비활성화하고 이벤트를 언바인딩. |

툴바 명령

툴바에는 기본적으로 다음 명령이 포함되어 있습니다:

| 명령 | 동작 | | ---------------- | ----------------------------------- | | h1, h2, h3 | 선택한 텍스트를 제목 수준으로 변환. | | bold | 굵게 서식 적용. | | italic | 기울임 서식 적용. | | underline | 밑줄 서식 적용. | | strikethrough | 취소선 서식 적용. | | blockquote | 선택한 텍스트를 인용문으로 변환. | | createLink | 하이퍼링크를 생성하거나 업데이트. |

커스터마이징

사용자 정의 스타일

에디터 요소를 CSS로 타겟팅하여 기본 스타일을 덮어쓸 수 있습니다:

#editor {
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 100px;
}

.editor-text-link {
  color: blue;
  text-decoration: underline;
}

새로운 툴바 명령 추가

setRender 메서드를 수정하여 툴바에 사용자 정의 버튼을 추가할 수 있습니다:

const customButton = document.createElement('button');
customButton.textContent = 'Custom';
customButton.onclick = () => {
  console.log('Custom button clicked');
};
editor.elements.command.wrap?.appendChild(customButton);