Form Example: Editors

Different editors using controls.

{
    "schema": {
        "type": "object",
        "properties": {
            "html_editor": {
                "type": "string"
            },
            "json_editor": {
                "type": "object"
            }
        }
    },
    "uischema": {
        "type": "Categorization",
        "elements": [
            {
                "type": "Category",
                "label": "HTML Editor",
                "elements": [
                    {
                        "type": "Control",
                        "scope": "#/properties/html_editor",
                        "options": {
                            "multi": true,
                            "widget_class": "derafu-form-html-editor"
                        }
                    }
                ]
            },
            {
                "type": "Category",
                "label": "JSON Editor",
                "elements": [
                    {
                        "type": "Control",
                        "scope": "#/properties/json_editor",
                        "options": {
                            "multi": true,
                            "widget_class": "derafu-form-json-editor"
                        }
                    }
                ]
            }
        ]
    },
    "data": {
        "html_editor": "This is a long text with <strong>bold</strong> and <em>italic</em> text.",
        "json_editor": {
            "name": "John Doe",
            "age": 30,
            "email": "[email protected]"
        }
    }
}

html_editor

json_editor

Not all the input types and widgets from Derafu Form are supported by JSON Forms library.

{
    "type": "object",
    "properties": {
        "html_editor": {
            "type": "string"
        },
        "json_editor": {
            "type": "object"
        }
    }
}

{
    "type": "Categorization",
    "elements": [
        {
            "type": "Category",
            "label": "HTML Editor",
            "elements": [
                {
                    "type": "Control",
                    "scope": "#/properties/html_editor",
                    "options": {
                        "multi": true,
                        "widget_class": "derafu-form-html-editor"
                    }
                }
            ]
        },
        {
            "type": "Category",
            "label": "JSON Editor",
            "elements": [
                {
                    "type": "Control",
                    "scope": "#/properties/json_editor",
                    "options": {
                        "multi": true,
                        "widget_class": "derafu-form-json-editor"
                    }
                }
            ]
        }
    ],
    "options": []
}

{
    "html_editor": "This is a long text with <strong>bold</strong> and <em>italic</em> text.",
    "json_editor": {
        "name": "John Doe",
        "age": 30,
        "email": "[email protected]"
    }
}