Editor API
초기화
interface EditorConfig {
// Configuration for the editor items
items: Array<Record<string, any>>;
// Automatically apply changes to the data object
autoSave?: boolean;
// Define the current active batch for the editor
activeBatch?: string;
// Configuration for the top toolbar
topBar?: {
// Array of items for the toolbar
items: Array<Record<string, any>>;
};
// Configuration for the bottom toolbar
bottomBar?: {
// Array of items for the toolbar
items: Array<Record<string, any>>;
};
// Additional CSS class for the editor's box
css?: string;
// Initial values for the editor fields
values?: Record<string, any>;
// Placement of the editor (inline, modal, sidebar)
placement?: "inline" | "modal" | "sidebar";
// Set the editor to readonly mode
readonly?: boolean;
// Define layout for the editor
layout?: "columns" | "default";
// Function to handle action events
onaction?: (ev: OnActionResult) => void;
// Function to handle change events
onchange?: (ev: OnChangeResult) => void;
// Function to handle save events
onsave?: (ev: OnSaveResult) => void;
// Function to handle validation events
onvalidation?: (ev: OnValidationResult) => void;
}
Properties
| activeBatch | 선택 사항. 에디터에서 현재 활성화된 입력 배치를 제어합니다 |
| autoSave | 선택 사항. 편집기에서 데이터의 자동 저장을 제어합니다 |
| bottomBar | 선택 사항. 에디터의 하단 툴바 구성을 제어합니다 |
| css | 선택 사항. 에디터 박스에 CSS 클래스를 정의합니다 |
| focus | 선택 사항. 에디터 위젯이 렌더링될 때 자동으로 포커스를 받을지 여부를 제어합니다 |
| hotkeys | 선택 사항. Editor 동작에 대한 사용자 정의 단축키를 지정할 수 있습니다 |
| items | 선택 사항. Editor에서 렌더링할 컴포넌트를 정의합니다 |
| layout | 선택 사항. 에디터 컴포넌트의 레이아웃을 제어합니다 |
| placement | 선택 사항. 에디터 컴포넌트의 배치를 제어합니다 |
| readonly | 선택 사항. 편집기를 읽기 전용 모드로 설정할지 여부를 제어합니다 |
| topBar | 선택 사항. 에디터의 상단 툴바 구성을 제어합니다 |
| values | 선택 사항. 편집기 필드의 초기 값을 정의합니다 |
Events
| action | 에디터의 필드에 변경이 발생할 때 실행됩니다 |
| change | 에디터의 필드에 변경이 발생할 때 실행됩니다 |
| save | 사용자가 편집기에서 데이터 저장을 요청할 때 발생합니다 |
| validation | 유효성 검사 프로세스가 완료될 때 발생합니다 |
Helpers
registerEditorItem- 외부 컨트롤을 editor items으로 등록