registerEditorItem

설명

외부 컨트롤을 에디터 항목으로 등록합니다

사용법

registerEditorItem?: (
  type: string,
  handler: Component<any>
) => void;

매개변수

• type - (필수) 에디터 항목의 고유 타입 이름을 정의하는 문자열
• handler - (필수) 커스텀 에디터 컨트롤을 구현하는 Svelte 컴포넌트 해당 컴포넌트는 다음을 지원해야 합니다:
  • value 속성 – 필드의 현재 값,
  • onchange callback – 값이 변경될 때 호출됩니다.

예시

에디터에 Rich Select 컨트롤 렌더링

<script>
    import { RichSelect } from "@svar-ui/svelte-core";
    import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";

    registerEditorItem("select", RichSelect);

    const items = [
        {
            comp: "select",
            key: "name",
            label: "Name",
            options: [
                { id: 1, label: "High", color: "#DF282F" },
                { id: 2, label: "Medium", color: "#FFC975" },
                { id: 3, label: "Low", color: "#65D3B3" },
            ]
        }
    ];
</script>

<Editor {items} />

에디터에 댓글 추가

<script>
    import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
    import { Comments } from "@svar-ui/svelte-comments";

    registerEditorItem("comments", Comments);

    const users = [
        {
            id: 1,
            name: "John Doe",
            avatar: "https://via.placeholder.com/150",
        },
    ];

    const items = [
        {
            comp: "comments",
            key: "comments",
            label: "Comments",
            users,
            activeUser: 1,
        },
    ];

    const data = {
        comments: [
            {
                id: 1,
                user: 1,
                content: "Greetings, fellow colleagues.",
                date: new Date(),
            },
        ],
    }
</script>

<Editor {items} values={data} />