​

Configuration#

Create a vizy.php file under your /config directory with the following options available to you. You can also use multi-environment options to change these per environment.

The below shows the defaults already used by Vizy, so you don't need to add these options unless you want to modify the values.

<?php

return [
    '*' => [
        'iconsPath' => '@webroot/icons/',
        'recursiveFieldCount' => 10,
    ],
];

​

Configuration options#

• iconsPath - Provide a file system path for a collection of SVG icons. These are available when creating your Block Types for a Vizy field. This also accepts environment variables or aliases.
• recursiveFieldCount - For recursive Vizy fields, set the limit for how many times a Vizy fields can be nested.

​

Control Panel#

You can also manage configuration settings through the Control Panel by visiting Settings → Vizy.

​

Editor Configuration#

You can provide configuration files for the editor by providing a .json file with its configurations, very similar to how the Redactor (opens new window) plugin works. From this file, you can define what buttons are shown, what order and more. This can be particularly useful in maintaining consistent configurations for your Vizy fields across projects.

For example, create a vizy folder in your /config directory, and inside that, create a Minimal.json file. Place the following content into that file:

{
    "buttons": ["italic", "bold", "undo", "redo"]
}

Here, we're setting the buttons available to the editor to only show Italic, Bold, Undo and Redo (in that order). All other buttons and functionality will be disabled.

​

Available Options#

The below list details the available configuration options to use in your JSON files.

​

Buttons#

{
    "buttons": ["italic", "bold", "undo", "redo"]
}

You can also provide this as an empty array, to disable buttons completely.

{
    "buttons": []
}

​

Formatting#

You can use the following options in the formatting options. Note that you'll also need to include formatting as a button in the buttons options.

{
    "buttons": ["formatting", "bold", "italic"],
    "formatting": ["h2", "h3", "h4", "h5", "h6"]
}

​

Table#

You can use the following options in the table options. Note that you'll also need to include table as a button in the buttons options.

{
    "buttons": ["table", "bold", "italic"],
    "table": ["insert-table", "delete-table", "add-col-before", "delete-col", "add-row-before", "delete-col"]
}

​

Commands#

You can use the any of the buttons values in the commands options to enable them in the Command Palette.

{
    "buttons": ["table", "bold", "italic"],
    "commands": ["table", "bold", "italic"]
}

​

Kitchen Sink#

The below is a "kitchen sink" example that contains everything.

{
    "buttons": ["html", "formatting", "h1", "h2", "h3", "h4", "h5", "h6", "bold", "italic", "underline", "strikethrough", "subscript", "superscript", "ordered-list", "unordered-list", "code-block", "hr", "highlight", "align-left", "align-right", "align-center", "align-justify", "clear-format", "line-break", "link", "image", "table", "media-embed", "iframe", "undo", "redo"],
    "formatting": ["paragraph", "code-block", "blockquote", "h1", "h2", "h3", "h4", "h5", "h6"],
    "table": ["insert-table", "delete-table", "add-col-before", "add-col-after", "delete-col", "add-row-before", "add-row-after", "delete-row", "merge-cells", "split-cells", "toggle-header-column", "toggle-header-row", "toggle-header-cell"],
    "toolbarFixed": true
}

​

Custom Buttons#

In addition to including or excluding available button, you can also define your own custom buttons that extend an existing Node or Mark. For example, you might want to create your own custom Paragraph node with specific attributes.

{
    "buttons": [
        "bold",
        "italic",
        {
            "svg": "h1", 
            "title": "Featured Heading 1", 
            "type": "heading", 
            "attrs": {"level": "1", "class": "feature-heading"},
            "editorStyle": ".feature-heading { color: red; }"
        }
    ],
    "formatting": [
        {
            "svg": "<svg ... />", 
            "title": "Lead", 
            "type": "paragraph", 
            "attrs": {"class": "lead-text", "data-name": "lead-text"}
        },
        "paragraph"
    ]
}

These definitions can be included at the top-level, or within the formatting dropdown.