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>