Package is provided by TipTap.

resources/js/Components/Form/Editor.vue

​
Markdown

Editor supports markdown shortcuts out of the box so you can use them to write faster. See all the shortcuts here.

​
Props

Use props to style the look of the editor.

​
Toolbar

toolbar?: string[] | "full" | "basic" | "comment"

Pass an array of commands you want to enable for current editor or pass the preset name: basic or comment
By default, all available commands are enabled.

Here is the list of all available commands:

  • bold: Convert selected text to bold.
  • italic: Convert selected text to italic.
  • heading: Heading from 1-6 level. Default is h2 and h3. To override default levels, pass additional prop headingLevels?: Level[].
  • link: Convert selected text to link.
  • list: Convert selected text to unordered list (bullets).
  • listOrdered: Convert selected text to ordered list (numbers).
  • blockquote: Convert selected text to quote.
  • code: Render selected text to code.
  • image: Add image.
  • hr: Add horizontal line (text separator).
  • break: Add line break.
  • undo/redo: Allow undo and redo.

Here is the list of predefined toolbar presets which you can use:

  • full: Same as default, but with all heading levels included
  • basic: bold, italic
  • comment: bold, italic, lists, code, image, break, undo/redo

​
Sticky toolbar

stickyToolbar?: boolean

Make toolbar sticky to be always visible in editor with lots of content. Default is true.

​
Commands as icon or text

icons?: boolean

By default, commands will be rendered as icons with command description tooltip on hover. Set prop to false to render commands as text in toolbar.

​
Placeholders

placeholder?: string;
placeholderHeading?: string

Set placeholders for empty text block and headings. Default placeholders are empty strings.

​
Classes

class?: HTMLAttributes["class"]
contentClass?: HTMLAttributes["class"]

You can pass list of custom classes via class prop to style the look of editor wrapper or editor input area via content-class.

For example, to limit the height of editor you can set class to content-class="max-h-96 overflow-y-auto". When editor content reaches the maximum defined height of 24rem the vertical scrollbar will appear.

​
Example

​
Default

Full docs coming soon…

​
Custom

Full docs coming soon…