Formate definieren

Verwenden Sie in der conf.json Datei die Eigenschaft formats um die Formate in den Editoren zu bestimmen oder zu erweitern.

Sie können die Formate allgemein oder separat für die Elemente editor und content definieren. Wenn Sie die Formate allgemein definieren, also für alle Arten von Editoren, dann verwenden Sie default.

Beispiel für allgemeine Formate:

{
"formats": {
"default": {
...
}
}
}

Beispiel für separate Formate:

{
    "formats": {
        "editor": {
            ...
        },
"content": {
...
}
    }
}

Es gibt standardmäßig vier Format Listen:

  • headers: Überschriften
  • inline: Zeichenformate
  • blocks: Absatzformate
  • alignment: Ausrichtung

Verwenden Sie die Bezeichnung der anzupassenden Format Liste und setzen hierfür eine der folgenden Eigenschaften:

  • options: Eine kommaseparierte Liste mit den Format/HTML Elementen die angezeigt werden sollen. Hiermit können Sie die Sortierung der Standard Formate anpassen oder Standard Formate entfernen. Zu beachten ist das als Optionswert der String von format verwendet wird. Für h2 ist der Titel Überschrift 2 und als format ist h2 eingetragen. Siehe Standard Liste weiter unten. Beispiel um die Überschriften H1 und H2 nicht anzuzeigen:
    {
    "formats": {
    "default": {
    "headers": {
    "options": "h2,h3,h4,h5"
    }
    }
    }
    }
  • items: Fügen Sie eigene Format/HTML Elemente hinzu oder überschreiben bestehende (werden über title identifiziert). Beispiel um eine Überschrift TEST hinzuzufügen:
    {
        "formats": {
            "default": {
                "headers": {
                    "items": [
    {"title": "TEST", "format": "h6"}
    ]
                }
            }
        }
    }

Verwenden Sie in Kombination mit items auch die Eigenschaft merge, um die Standard Formate beizubehalten oder diese zu überschreiben. Wenn Sie diese Eigenschaft nicht setzen, überschreibt Ihre Format Liste die gesamte Standard Format Liste.

Sie können auch eine komplette Format Liste ausblenden, wenn Sie für diese keine Eigenschaften definieren:

{
    "formats": {
        "default": {
            "headers": {}
        }
    }
}

Falls gewünscht, können Sie auch eigene Format Listen definieren:

{
"formats": {
        "default": {
            "my_formats": {
                "title": "Eigene Formate",
                "items": [
                    {"title": "TEST", "format": "h1"},
                    {"title": "TEST small", "format": "h6"}
                ]
            }
        }
    }
}

Die Standard Format Liste definiert sich wie folgt:

{
"headers": [
        {"title": "Header 1", "format": "h1"},
        {"title": "Header 2", "format": "h2"},
        {"title": "Header 3", "format": "h3"},
        {"title": "Header 4", "format": "h4"},
        {"title": "Header 5", "format": "h5"},
        {"title": "Header 6", "format": "h6"}
],
"inline": [
        {"title": "Bold", "icon": "bold", "format": "bold"},
        {"title": "Italic", "icon": "italic", "format": "italic"},
        {"title": "Underline", "icon": "underline", "format": "underline"},
        {"title": "Strikethrough", "icon": "strikethrough", "format": "strikethrough"},
        {"title": "Superscript", "icon": "superscript", "format": "superscript"},
        {"title": "Subscript", "icon": "subscript", "format": "subscript"},
        {"title": "Code", "icon": "code", "format": "code"}
    ],
    "blocks": [
        {"title": "Paragraph", "format": "p"},
        {"title": "Blockquote", "format": "blockquote"},
        {"title": "Div", "format": "div"},
        {"title": "Pre", "format": "pre"}
    ],
    "alignment": [
        {"title": "Left", "icon": "alignleft", "format": "alignleft"},
        {"title": "Center", "icon": "aligncenter", "format": "aligncenter"},
        {"title": "Right", "icon": "alignright", "format": "alignright"},
        {"title": "Justify", "icon": "alignjustify", "format": "alignjustify"}
    ]
}
wb_incandescent
Sie können diese Einstellungen, wie bei der conf.json üblich, auch nur für bestimmte Seitentypen anwenden. Zusätzlich können Sie auch über PageExtension die Page Methode getFormats($type) überschreiben und Ihre ganz eigene Format Liste definieren.
warning
Bitte beachten Sie, dass das Entfernen einer Format Option nicht automatisch auch den jeweiligen Button in der Toolbar entfernt. Die Toolbar müssen Sie zusätzlich anpassen.