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/',
    ]
];

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.

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 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.

Ensure your file is valid JSON, taking care of trailing commas, and double quotes around properties.

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.

OptionDescription
buttonsAn array of available buttons. Refer to below.
formattingAn array of available formatting options. Refer to below.
toolbarFixedA boolean true/false to denote if the button toolbar should stick to the viewport when scrolling.

Buttons #

OptionDescription
h1Allow the use of <h1> heading tags.
h2Allow the use of <h2> heading tags.
h3Allow the use of <h3> heading tags.
h4Allow the use of <h4> heading tags.
h5Allow the use of <h5> heading tags.
h6Allow the use of <h6> heading tags.
boldAllow text to be bold.
italicAllow text to be italic.
underlineAllow text to be underlined.
strikeAllow text to have a strikethrough.
unordered-listAllow the use of <ul> elements for an unordered list.
ordered-listAllow the use of <ol> elements for an unordered list.
blockquoteAllow text to be shown as a blockquote.
highlightAllow text to be highlighted.
codeAllow text to be shown as inline code.
code-blockAllow text to be shown as a code block.
hrAllow the use of a <hr> element for a horizontal rule.
line-breakAllow the use of a <br> element for a horizontal rule.
align-leftAllow text to be left-aligned.
align-centerAllow text to be center-aligned.
align-rightAllow text to be right-aligned.
align-justifyAllow text to be justify.
clear-formatAllow all formatting to be cleared.
undoAllow undo functionality.
redoAllow redo functionality.
htmlAllow raw editing of HTML, generated by the editor.
linkAllow text to be shown as a link.
imageAllow an image to be inserted.
formattingAllow a dropdown for formatting options. See below for configuration.
{
    "buttons": ["italic", "bold", "undo", "redo"]
}

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

{
    "buttons": []
}

Formatting #

OptionDescription
h1Allow the use of <h1> heading tags.
h2Allow the use of <h2> heading tags.
h3Allow the use of <h3> heading tags.
h4Allow the use of <h4> heading tags.
h5Allow the use of <h5> heading tags.
h6Allow the use of <h6> heading tags.
codeAllow text to be shown as inline code.
blockquoteAllow text to be shown as a blockquote.
paragraphAllow text to be shown as a paragraph.
{
    "formatting": ["h2", "h3", "h4", "h5", "h6"]
}

Get started with Vizy

Available for Craft 3. Get it from the plugin store.