Skip to content

Kirby 4.0.1

Search
    Search by Algolia

    Writer

    A simple WYSIWYG editor field for inline content with formats like bold, italic, etc.

    Example

    fields:
  text:
    label: Writer
    type: writer

    Field properties

    Name Type Default Description
    after – Optional text that will be shown after the input
    autofocus bool – Sets the focus on this field when the form loads. Only the first field with this label gets
    before – Optional text that will be shown before the input
    counter bool true Enables/disables the character counter in the top right corner
    default – Default value for the field, which will be used when a page/file/user is created
    disabled bool – If true, the field is no longer editable and will not be saved
    headings array – Available heading levels
    help – Optional help text below the field
    icon string – Optional icon that will be shown at the end of the field
    inline bool false Enables inline mode, which will not wrap new lines in paragraphs and creates hard breaks instead.
    label – The field label can be set as string or associative array with translations
    marks – Sets the allowed HTML formats. Available formats: bold, italic, underline, strike, code, link, email. Activate/deactivate them all by passing true/false. Default marks are bold, italic, underline, strike, link, email
    maxlength int – Maximum number of allowed characters
    minlength int – Minimum number of required characters
    nodes – Sets the allowed nodes. Available nodes: paragraph, heading, bulletList, orderedList, quote. Activate/deactivate them all by passing true/false. Default nodes are paragraph, heading, bulletList, orderedList.
    placeholder – Optional placeholder value that will be shown when the field is empty
    required bool – If true, the field has to be filled in correctly to be saved.
    toolbar – Toolbar options, incl. marks (to narrow down which marks should have toolbar buttons), nodes (to narrow down which nodes should have toolbar dropdown entries) and inline to set the position of the toolbar (false = sticking on top of the field)
    translate bool true If false, the field will be disabled in non-default languages and cannot be translated. This is only relevant in multi-language setups.
    when – Conditions when the field will be shown (since 3.1.0)
    width string 1/1 The width of the field in the field grid. Available widths: 1/1, 1/2, 1/3, 1/4, 2/3, 3/4

    Marks

    The writer field supports the following marks by default:

    • bold
    • italic
    • underline
    • strike
    • code
    • link
    • email
    Since 4.0.0
    • sub
    • sup
    • clear
    fields:
  text:
    type: writer
    inline: true
    marks:
      - bold
      - italic
      - strike

    You can extend Kirby to include custom marks.

    Nodes

    Apart from paragraph nodes, the writer field supports headings and lists. You can fine-tune the writer field from your blueprint by defining the available block formats (nodes).

    The writer field supports the following marks by default:

    • paragraph
    • bulletList
    • orderedList
    • heading
    • horizontalRule
    Since 4.0.0
    • quote

    Unsupported formats will automatically be ignored when content is pasted and the toolbar will also not include the matching buttons.

    fields:
  writer:
    type: writer
    nodes:
      - heading
      - bulletList
      - orderedList

    You can extend Kirby to include custom nodes.

    Since 4.0.0

    Toolbar

    The toolbar option allows you to customize the writer's toolbar:

    text:
  type: writer
  marks:
    - bold
    - italic
    - link
    - code
  toolbar:
    inline: false
    marks:
      - bold
      - "|"
      - link
    • inline attaches the toolbar to the top of the field (instead of the floating pill style)
    • marks and nodes control which marks and nodes are shown in the toolbar. Make sure that the ones you want to include are actually active and not excluded in the top-level marks and nodes options (see above). The top-level options define which ones are supported, the toolbar-level options what is shown as buttons in the toolbar. For example, you might want to support the code mark for pasting, but hide it from the toolbar.

    Inline mode

    By default, the writer field will supports multiple paragraphs (<p>). In inline mode, hitting enter will create breaks instead of creating a new paragraph.

    fields:
  text:
    type: writer
    inline: true

    In inline mode, all nodes (see above) are disabled.

    Since 4.0.0

    Heading levels

    You can set the available heading levels in the writer field with the headings option:

    fields:
  text:
    type: writer
    headings:
      - 2
      - 3
      - 4

    How to use in templates/snippets

    The content of the writer field is stored as plain HTML. To render the field in your template, echo the value.

    <?= $page->text() ?>