API 레퍼런스

WebEditor 컴포넌트의 Props, 메서드, 이벤트에 대한 상세 문서입니다.

Props

Prop	Type	Default	Description
licenseKey	string	required	라이선스 키
theme	Theme	'light'	테마 설정
height	number \| string	400	에디터 높이 (px)
initialContent	string	''	초기 HTML 콘텐츠
placeholder	string	''	플레이스홀더 텍스트
readOnly	boolean	false	읽기 전용 모드
toolbar	ToolbarConfig	-	툴바 설정
features	FeaturesConfig	-	기능 활성화 설정
collaboration	CollabConfig	-	협업 설정

이벤트

Event	Callback Type	Description
onChange	(content: string) => void	콘텐츠 변경 시
onSave	(content: string) => void	Ctrl+S 저장 시
onLoad	() => void	에디터 로드 완료 시
onError	(error: Error) => void	에러 발생 시
onSelectionChange	(selection: Selection) => void	선택 영역 변경 시

메서드 (Ref)

useRef를 사용하여 에디터 인스턴스에 접근할 수 있습니다.

import { useRef } from 'react';
import { WebEditor, WebEditorRef } from '@dev-jitsu/web-editor';

function MyEditor() {
  const editorRef = useRef<WebEditorRef>(null);

  const handleSave = () => {
    const content = editorRef.current?.getContent();
    console.log(content);
  };

  return (
    <>
      <WebEditor ref={editorRef} licenseKey="..." />
      <button onClick={handleSave}>저장</button>
    </>
  );
}

Method	Return Type	Description
getContent()	string	HTML 콘텐츠 반환
setContent(html)	void	HTML 콘텐츠 설정
focus()	void	에디터에 포커스
blur()	void	포커스 해제
exportAs(format)	Promise<Blob>	파일로 내보내기
importFile(file)	Promise<void>	파일 불러오기

TypeScript 타입

import type {
  WebEditorProps,
  WebEditorRef,
  Theme,
  ToolbarConfig,
  FeaturesConfig,
  CollaborationConfig,
  DocumentIOConfig,
} from '@dev-jitsu/web-editor';