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: