1.0.3 • Published 9 months ago
@makecode/text-editor v1.0.3
@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);