registerEditorItem

Beschreibung

Registriert externe Steuerelemente als Editor-Elemente

Verwendung

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

Parameter

• type - (erforderlich) Zeichenkette, die den eindeutigen Typnamen des Editor-Elements definiert
• handler - (erforderlich) Svelte-Komponente, die das benutzerdefinierte Editor-Steuerelement implementiert Die Komponente muss unterstützen:
  • eine value-Eigenschaft – den aktuellen Wert des Feldes,
  • einen onchange callback – wird ausgelöst, wenn sich der Wert ändert.

Beispiele

Rich Select-Steuerelement im Editor rendern

<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} />

Kommentare zum Editor hinzufügen

<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} />