A basic rich text editor for your application. Built using ProseMirror and Tiptap.
Because of large external dependencies, the editor's JavaScript is not included in the core Flux bundle. It will be loaded on-the-fly as a separate JS file when you use the flux:editor component.
Flux's editor toolbar is both keyboard/screen-reader accessible and completely customizable to suit your application's needs.
The following toolbar items are available:
Here's an example of what a custom "Copy to clipboard" item in a blade file might look like:
Now you can reference your new component by name in any toolbar configuration like so:
By default, the editor will have a minimum height of 200px, and a maximum height of 500px. If you want to customize this behavior, you can use Tailwind utilties to target the content slot and set your own min/max height and overflow behavior.
The [&_[data-slot=content]]: selector targets a child element with a data-slot="content" attribute.
This is an advanced Tailwind technique used to style a nested element inline without needing direct access to it.
Flux's editor uses Tiptap's default shortcut keys which are common amongst most rich text editors.
|
Operation
|
Windows/Linux
|
Mac
|
|---|---|---|
| Apply paragraph style | Ctrl+Alt+0 | Cmd+Alt+0 |
| Apply heading level 1 | Ctrl+Alt+1 | Cmd+Alt+1 |
| Apply heading level 2 | Ctrl+Alt+2 | Cmd+Alt+2 |
| Apply heading level 3 | Ctrl+Alt+3 | Cmd+Alt+3 |
| Bold | Ctrl+B | Cmd+B |
| Italic | Ctrl+I | Cmd+I |
| Underline | Ctrl+U | Cmd+U |
| Strikethrough | Ctrl+Shift+X | Cmd+Shift+X |
| Bullet list | Ctrl+Shift+8 | Cmd+Shift+8 |
| Ordered list | Ctrl+Shift+7 | Cmd+Shift+7 |
| Blockquote | Ctrl+Shift+B | Cmd+Shift+B |
| Code | Ctrl+E | Cmd+E |
| Highlight | Ctrl+Shift+H | Cmd+Shift+H |
| Align left | Ctrl+Shift+L | Cmd+Shift+L |
| Align center | Ctrl+Shift+E | Cmd+Shift+E |
| Align right | Ctrl+Shift+R | Cmd+Shift+R |
| Paste without formatting | Ctrl+Shift+V | Cmd+Shift+V |
| Add a line break | Ctrl+Shift+Enter | Cmd+Shift+Enter |
| Undo | Ctrl+Z | Cmd+Z |
| Redo | Ctrl+Shift+Z | Cmd+Shift+Z |
Although Flux's editor isn't a markdown editor itself, it allows you to use markdown syntax to trigger styling changes while authoring your content.
|
Markdown
|
Operation
|
|---|---|
| # | Apply heading level 1 |
| ## | Apply heading level 2 |
| ### | Apply heading level 3 |
| ** | Bold |
| * | Italic |
| ~~ | Strikethrough |
| - | Bullet list |
| 1. | Ordered list |
| > | Blockquote |
| ` | Inline code |
| ``` | Code block |
| ```? | Code block (with class="language-?") |
| --- | Horizontal rule |
If you need to localize the editor's aria-label or tooltip copy, you'll need to register the following translation keys in one of your app's lang files.
Here's an example of supporting Spanish localization:
|
Prop
|
Description
|
|---|---|
| wire:model |
Binds the editor to a Livewire property. See the wire:model documentation for more information.
|
| name |
Name attribute for the editor. Automatically set when using
wire:model . |
| value |
Initial content for the editor. Used when not binding with
wire:model . |
| label |
Label text displayed above the editor. When provided, wraps the editor in a
flux:field component with an adjacent flux:label component. See the field component. |
| description |
Help text displayed below the editor. When provided alongside
label , appears between the label and editor within the flux:field wrapper. See the field component. |
| description-trailing |
The description provided will be displayed below the editor instead of above it.
|
| badge |
Badge text displayed at the end of the
flux:label component when the label prop is provided. |
| placeholder |
Placeholder text displayed when the editor is empty.
|
| toolbar |
Space-separated list of toolbar items to display. Use
| for separator and ~ for spacer. By default, includes heading, bold, italic, strike, bullet, ordered, blockquote, link, and align tools. |
| disabled |
Prevents user interaction with the editor.
|
| invalid |
Applies error styling to the editor.
|
|
Slot
|
Description
|
|---|---|
| default |
The editor content and toolbar components. If omitted, the standard toolbar and an empty content area will be used.
|
|
Attribute
|
Description
|
|---|---|
| data-flux-editor |
Applied to the root element for styling and identification.
|
Container for editor toolbar items. Can be used for custom toolbar layouts.
|
Prop
|
Description
|
|---|---|
| items |
Space-separated list of toolbar items to display. Use
| for separator and ~ for spacer. If not provided, displays the default toolbar. |
|
Slot
|
Description
|
|---|---|
| default |
The toolbar items, separators, and spacers. Use this slot to create a completely custom toolbar.
|
|
Prop
|
Description
|
|---|---|
| icon |
Name of the icon to display in the button.
|
| iconVariant |
The variant of the icon to display. Options:
mini , micro , outline . Default: mini (without slot) or micro (with slot). |
| tooltip |
Text to display in a tooltip when hovering over the button.
|
| disabled |
Prevents interaction with the button.
|
|
Slot
|
Description
|
|---|---|
| default |
Content to display inside the button. If provided alongside an icon, the icon will be displayed before this content.
|
Container for the editor's editable content. Typically used when creating a custom editor layout.
|
Slot
|
Description
|
|---|---|
| default |
The initial HTML content for the editor. This content will be processed and managed by the editor.
|
Available toolbar items that can be referenced in the `toolbar` prop or used directly in a custom toolbar.
|
Component
|
Description
|
|---|---|
| heading |
Heading level selector.
|
| bold |
Bold text formatting.
|
| italic |
Italic text formatting.
|
| strike |
Strikethrough text formatting.
|
| underline |
Underline text formatting.
|
| bullet |
Bulleted list.
|
| ordered |
Numbered list.
|
| blockquote |
Block quote formatting.
|
| code |
Code block formatting.
|
| link |
Link insertion.
|
| align |
Text alignment options.
|
| undo |
Undo last action.
|
| redo |
Redo last action.
|