Skip to content

Kirby 5.3.3

    Search by Algolia

    Textarea buttons

    You can add your custom textarea button in a plugin via the textareaButtons extension:

    site/plugins/your-plugin/index.js
    panel.plugin("getkirby/custom-textarea-buttons", {
  textareaButtons: {
    highlight: {
      label: "Highlight",
      icon: "wand",
      click: function () {
        this.command("toggle", "<mark>", "</mark>")
      },
      shortcut: "m",
    },
  }
});

    Each button should specify a label, an icon as well as a click handler.

    click handler

    This function is called when your button is clicked. You can add any code you want, but most likely you want to use the this.command(name, ...args) helper functions to trigger changes in the textarea input.

    Don't use arrow function syntax such as click: () =>. We cannot rebind this inside of an arrow function and you won't have access to the this.command helper.

    The following commands are supported:

    Command name Description Arguments
    dialog Opens a dialog component string dialog name
    insert Inserts the given text at the current selection string func text
    prepend Prepends the given text to the current selection string func text
    toggle Toggles wrapping of the current selection string func before,
    string func after (optional)
    upload Opens the file upload dialog
    wrap Wraps the current selection with the given text string func before,
    string func after (optional)

    All arguments that can be a callback function themselves, will be called with two parameters:

    • input reference to textarea input Vue component
    • selection currently selected text

    For example, the default ordered list button triggers the following command

    this.command("insert", (input, selection) =>
  selection
    .split("\n")
    .map((line, index) => index + 1 + ". " + line)
    .join("\n")
)

    Button label translation

    You can translate the button label by defining it in the label getter. The getter ensures that the translation is already loaded when the label is rendered:

    site/plugins/your-plugin/index.js
    panel.plugin("getkirby/custom-textarea-buttons", {
  textareaButtons: {
    highlight: {
      get label() {
        return panel.$t("highlight");
      },
      icon: "wand",
      click: function () {
        this.command("toggle", "<mark>", "</mark>")
      },
      shortcut: "m",
    },
  }
});

    Read more about plugin translations.

    Shortcut

    Each button can also define a shortcut which will trigger the button's click handler when the shortcut is pressed together with the Cmd/Ctrl key inside the textarea.

    Use in the field

    Your new textarea button won't automatically be included in the textarea's toolbar. To add it, use the buttons option.