Editor
The editor is an official Stapy plugin. Use it to more easily write page data and content.


Note: The plugin is available since the version 1.16.0.
The editor is built with Pure CSS and CodeMirror. The CSS and JS are loaded from jsDelivr CDN.
When server is running, enter the following URL to access the editor:
http://127.0.0.1:1985/_editor
Configuration
The editor configuration file is located in the source
directory:
source
+----- editor.json
Editor path
The default editor path key is _editor
. This is set by the first parent key in the JSON data configuration:
{
"_editor": {
...
}
}
http://127.0.0.1:1985/_editor
Multiple editor paths with specific configuration are allowed:
{
"_editor_posts": {
...
},
"_editor_static": {
...
},
}
Note: the editor path key is case sensitive.
Protected pages
The "protected_page" config allows to prevent the edition of a page. The page will not appear in the list and cannot be edited.
Add the page path in the list, regex is allowed. Example:
{
"_editor": {
"protected_pages": [
"robots.txt",
"sitemap.xml",
"secret/(.*)"
],
...
}
}
Switcher
The switcher config adds links in the header to switch between editor paths.
{
"_editor": {
"editor_switcher": {
"Full": "/_editor",
"Content": "/_editor_c"
},
...
}
}
Grid
Columns
Choose the columns you want to display in the grid with the grid > columns config. You can set options for a list of defined values.
Option | Description | Excepted | Default |
---|---|---|---|
label | Column label | str | |
options | Defined values | Array |
{
"_editor": {
...
"grid": {
"columns": {
"title": {
"label": "Title"
},
"enabled": {
"label": "Enabled",
"options": [
{
"values": ["", "1", 1, true],
"label": "Yes"
},
{
"values": ["0", 0, false],
"label": "No"
}
]
}
},
...
},
...
}
}
Query
A JSON query is made to get the list of pages. Set the condition and sort order of displaying pages in the grid with grid > query.
Option | Description | Excepted | Default |
---|---|---|---|
where | Filter | key:value | - |
order | Sort order | key:dir | - |
limit | Limit | start:end | 1:10000 |
{
"_editor": {
...
"grid": {
...
"query": {
"where": "",
"order": "_full_path:asc",
"limit": ""
}
},
...
}
}
Actions
An array containing the actions to display in the grid.
Option | Description | Excepted | Default |
---|---|---|---|
path | The page path | str | |
class | The link element class name | str | |
label | The link element label | str | {label} |
data | The link data attributes | Object | {} |
{
"_editor": {
...
"grid": {
...
"actions": [
{
"path": "build/",
"class": "button-secondary pure-button",
"label": "Build"
},
{
"path": "add/",
"class": "pure-button pure-button-primary",
"label": "Add",
"data": {
"cy": "add"
}
}
],
},
...
}
}
Form
Actions
Enables or disables form page actions.
{
"_editor": {
...
"form": {
"actions": {
"back": true,
"reset": true,
"data": true,
"view": true,
"delete": true,
"save": true
},
...
}
}
}
Fieldsets
The form has one or more fieldsets. Set the fieldset objects in form > fieldsets.
Option | Description | Excepted | Default |
---|---|---|---|
label | Label | str | Fields |
column | Position in the form | left, right | left |
depends | Dependencies | Array or false | false |
fields | Fields | Object | {} |
The depends config allows the fieldset to be displayed only when another option is selected. This is useful for defining specific fields for a page.
{
"_editor": {
...
"form": {
"fieldsets": [
{
"label": "SEO",
"column": "left",
"depends": [
{
"field": "_page_type",
"values": ["html"]
}
],
"fields": {
}
},
...
]
}
...
}
}
In this example, SEO fieldset appears in the left column only when the _page_type field is set to html. Refresh the form to update dependencies.
The fieldset position in the form is the same as the fieldset position in the configuration.
Fields
A fieldset has one or more fields. Set the field objects in form > fieldsets > fields.
Option | Description | Excepted | Default |
---|---|---|---|
label | Label | str | Option |
required | Field is required | bool | false |
disabled | Field is disabled | bool | false |
readonly | Field is in Read-Only mode | bool | false |
save | Must be saved in the page data | bool | true |
hide | Dot not display the field | bool | false |
type | Field type | text, textarea, date, select, multiselect, block | text |
allow_html | Allow HTML elements (do not escape) | bool | false |
options | Options for select or multiselect | Array | [] |
mode | Editor mode for block type | html, md, xml, css, js, json, ${field_id} | html |
{
"_editor": {
...
"form": {
"fieldsets": [
{
...
"fields": {
"title": {
"label": "Title",
"required": true,
"type": "text"
},
"tags": {
"label": "Tags",
"type": "multiselect",
"options": [
{
"value": "post",
"label": "Post"
},
{
"value": "sitemap",
"label": "Sitemap"
},
{
"value": "menu",
"label": "Menu"
}
]
},
"inline_css": {
"label": "CSS",
"type": "block",
"mode": "css",
"save_dir": "content/css"
}
}
},
...
]
}
...
}
}
The block type content is saved in a file in the specified directory, and will be displayed with the {% %} tag:
<style>
{% inline_css %}
</style>