显示侧边栏

Flux Pro 组件

此组件仅在 Flux 的 Pro 版本中提供。

富文本编辑器

为您的应用程序提供的基础富文本编辑器。基于 ProseMirror 和 Tiptap 构建。

由于外部依赖较大，编辑器的 JavaScript 不包含在核心 Flux 包中。当您使用 flux:editor 组件时，它将作为单独的 JS 文件按需加载。

发布说明

解释此版本的新功能。

Styles

Bold ⌘B

Italic ⌘I

Strikethrough ⌘+Shift+S

Bullet list

Ordered list

Blockquote ⌘+Shift+B

Insert link ⌘K

Insert link

Unlink

Align

<flux:editor wire:model="content" label="…" description="…" />

Flux 的编辑器工具栏既支持键盘/屏幕阅读器访问，又可完全自定义以满足您应用程序的需求。

配置项目

您可以通过向 toolbar 属性传递空格分隔的项目列表来配置哪些工具栏项目可见以及它们的顺序。

Styles

Bold ⌘B

Italic ⌘I

Underline ⌘U

Align

Undo ⌘Z

Redo ⌘+Shift+Z

<flux:editor toolbar="heading | bold italic underline | align ~ undo redo" />

您可能注意到工具栏配置中的 | 和 ~ 字符。它们分别是 separator 和 spacer 的简写。

以下工具栏项目可用：

heading
bold
italic
strike
underline
bullet
ordered
blockquote
subscript
superscript
highlight
link
code
undo
redo

自定义项目

您可以通过在项目的 resources/views/flux/editor 目录中添加新文件来添加自己的工具栏项目。

- resources    - views        - flux            - editor                - copy.blade.php

以下是在 blade 文件中自定义“复制到剪贴板”项目的示例：

<flux:tooltip content="Copy to clipboard" class="contents">    <flux:editor.button x-on:click="navigator.clipboard?.writeText($el.closest('[data-flux-editor]').value); $el.setAttribute('data-copied', ''); setTimeout(() => $el.removeAttribute('data-copied'), 2000)">        <flux:icon.clipboard variant="outline" class="[[data-copied]_&]:hidden size-5!" />        <flux:icon.clipboard-document-check variant="outline" class="hidden [[data-copied]_&]:block size-5!" />    </flux:editor.button></flux:tooltip>

现在您可以在任何工具栏配置中按名称引用您的新组件，如下所示：

Styles

Bold ⌘B

Italic ⌘I

Strikethrough ⌘+Shift+S

Bullet list

Ordered list

Blockquote ⌘+Shift+B

Insert link ⌘K

Insert link

Unlink

Align

Copy to clipboard

<flux:editor toolbar="heading | […] | align ~ copy" />

自定义

如果您有更深层次的自定义需求，可以组合自己的编辑器组件。以下是在编辑器工具栏中放置自定义下拉菜单的示例：

Styles

Bold ⌘B

Italic ⌘I

Strikethrough ⌘+Shift+S

Bullet list

Ordered list

Blockquote ⌘+Shift+B

Insert link ⌘K

Insert link

Unlink

Align

<flux:editor>    <flux:editor.toolbar>        <flux:editor.heading />        <flux:editor.separator />        <flux:editor.bold />        <flux:editor.italic />        <flux:editor.strike />        <flux:editor.separator />        <flux:editor.bullet />        <flux:editor.ordered />        <flux:editor.blockquote />        <flux:editor.separator />        <flux:editor.link />        <flux:editor.separator />        <flux:editor.align />        <flux:editor.spacer />        <flux:dropdown position="bottom end" offset="-15">            <flux:editor.button icon="ellipsis-horizontal" tooltip="More" />            <flux:menu>                <flux:menu.item wire:click="…" icon="arrow-top-right-on-square">Preview</flux:menu.item>                <flux:menu.item wire:click="…" icon="arrow-down-tray">Export</flux:menu.item>                <flux:menu.item wire:click="…" icon="share">Share</flux:menu.item>            </flux:menu>        </flux:dropdown>    </flux:editor.toolbar>    <flux:editor.content /></flux:editor>

高度

默认情况下，编辑器的最小高度为 200px，最大高度为 500px。如果您想自定义此行为，可以使用 Tailwind 工具类来针对内容插槽并设置自己的最小/最大高度和溢出行为。

Styles

Bold ⌘B

Italic ⌘I

Strikethrough ⌘+Shift+S

Bullet list

Ordered list

Blockquote ⌘+Shift+B

Insert link ⌘K

Insert link

Unlink

Align

<flux:editor class="**:data-[slot=content]:min-h-[100px]!" />

[&_[data-slot=content]]: 选择器针对具有 data-slot="content" 属性的子元素。

这是一种高级的 Tailwind 技术，用于在不需要直接访问嵌套元素的情况下内联样式化它。

快捷键

Flux 的编辑器使用 Tiptap 的默认快捷键，这些快捷键在大多数富文本编辑器中都很常见。

操作	Windows/Linux	Mac
应用段落样式	Ctrl+Alt+0	Cmd+Alt+0
应用一级标题	Ctrl+Alt+1	Cmd+Alt+1
应用二级标题	Ctrl+Alt+2	Cmd+Alt+2
应用三级标题	Ctrl+Alt+3	Cmd+Alt+3
粗体	Ctrl+B	Cmd+B
斜体	Ctrl+I	Cmd+I
下划线	Ctrl+U	Cmd+U
删除线	Ctrl+Shift+X	Cmd+Shift+X
项目符列表	Ctrl+Shift+8	Cmd+Shift+8
有序列表	Ctrl+Shift+7	Cmd+Shift+7
引用块	Ctrl+Shift+B	Cmd+Shift+B
代码	Ctrl+E	Cmd+E
高亮	Ctrl+Shift+H	Cmd+Shift+H
左对齐	Ctrl+Shift+L	Cmd+Shift+L
居中对齐	Ctrl+Shift+E	Cmd+Shift+E
右对齐	Ctrl+Shift+R	Cmd+Shift+R
粘贴不带格式	Ctrl+Shift+V	Cmd+Shift+V
添加换行	Ctrl+Shift+Enter	Cmd+Shift+Enter
撤销	Ctrl+Z	Cmd+Z
重做	Ctrl+Shift+Z	Cmd+Shift+Z

Markdown 语法

虽然 Flux 的编辑器本身不是 markdown 编辑器，但它允许您在创作内容时使用 markdown 语法来触发样式更改。

Markdown	操作
#	应用一级标题
##	应用二级标题
###	应用三级标题
**	粗体
*	斜体
~~	删除线
-	项目符列表
1.	有序列表
>	引用块
`	内联代码
```	代码块
```?	代码块（带有 class="language-?"）
---	水平分割线

本地化

如果您需要本地化编辑器的 aria-label 或工具提示文本，您需要在应用程序的某个语言文件中注册以下翻译键。

以下是支持西班牙语本地化的示例：

// lang/es.json{    "Rich text editor": "Editor de texto enriquecido",    "Formatting": "Formato",    "Text": "Texto",    "Heading 1": "Encabezado 1",    "Heading 2": "Encabezado 2",    "Heading 3": "Encabezado 3",    "Styles": "Estilos",    "Bold": "Negrita",    "Italic": "Cursiva",    "Underline": "Subrayado",    "Strikethrough": "Tachado",    "Subscript": "Subíndice",    "Superscript": "Superíndice",    "Highlight": "Resaltar",    "Code": "Código",    "Bullet list": "Lista con viñetas",    "Ordered list": "Lista numerada",    "Blockquote": "Cita",    "Insert link": "Insertar enlace",    "Unlink": "Quitar enlace",    "Align": "Alinear",    "Left": "Izquierda",    "Center": "Centro",    "Right": "Derecha",    "Undo": "Deshacer",    "Redo": "Rehacer"}

扩展

Tiptap 拥有广泛的扩展，可用于为编辑器添加自定义功能。

以下扩展已经安装：

Highlight
Link
Placeholder
StarterKit
Superscript
Subscript
TextAlign
Underline

但您也可以添加自己的扩展、禁用内置扩展或修改编辑器的行为。

设置监听器

要做到这一点，您首先需要在布局的 <head> 标签中为 flux:editor 事件创建一个监听器。

<head>    ...    <script type="module">        document.addEventListener('flux:editor', (e) => {            ...        })    </script></head>

或者您可以将监听器添加到您的 app.js 文件中。

...document.addEventListener('flux:editor', (e) => {    ...})

注册扩展

设置好监听器后，您可以通过将扩展数组传递给 flux:editor 事件提供的 registerExtensions 方法来添加扩展。

如果扩展已经存在，它将被替换。

import Youtube from 'https://cdn.jsdelivr.net/npm/@tiptap/extension-youtube@2.11.7/+esm'document.addEventListener('flux:editor', (e) => {    e.detail.registerExtensions([        Youtube.configure({            controls: false,            nocookie: true,        }),    ])})

禁用扩展

如果您需要禁用编辑器自带的扩展，可以通过调用 flux:editor 事件提供的 disableExtension 方法并传递扩展名称来禁用扩展。

document.addEventListener('flux:editor', (e) => {    e.detail.disableExtension('underline')})

访问实例

有时您可能需要直接访问 Tiptap 实例来注册事件监听器或与实例进行其他交互。

您可以通过将回调传递给 flux:editor 事件提供的 init 方法，并在回调中访问 editor 实例来实现。

init 回调将在 Tiptap 的 beforeCreate 事件触发时被调用。您可以在 Tiptap 文档中找到有关 Tiptap 事件的更多详细信息。

document.addEventListener('flux:editor', (e) => {    e.detail.init(({ editor }) => {        editor.on('create', () => {})        editor.on('update', () => {})        editor.on('selectionUpdate', () => {})        editor.on('transaction', () => {})        editor.on('focus', () => {})        editor.on('blur', () => {})        editor.on('destroy', () => {})        editor.on('drop', () => {})        editor.on('paste', () => {})        editor.on('contentError', () => {})    })})

字段

带标签的结构化表单字段

文本域

用于较长表单内容的多行文本输入区域

参考

flux:editor

属性	描述
wire:model	将编辑器绑定到 Livewire 属性。有关更多信息，请参阅 wire:model 文档。
value	编辑器的初始内容。在不使用 wire:model 绑定时使用。
label	显示在编辑器上方的标签文本。提供时，将编辑器包装在 flux:field 组件中，并带有相邻的 flux:label 组件。请参阅字段组件。
description	显示在编辑器下方的帮助文本。当与 label 一起提供时，出现在 flux:field 包装器内的标签和编辑器之间。请参阅字段组件。
description:trailing	提供的描述将显示在编辑器下方而不是上方。
badge	当提供 label 属性时，显示在 flux:label 组件末尾的徽章文本。
placeholder	编辑器为空时显示的占位符文本。
toolbar	要显示的工具栏项目的空格分隔列表。使用 \| 作为分隔符，使用 ~ 作为间距符。默认情况下，包括标题、粗体、斜体、删除线、项目符、有序、引用、链接和对齐工具。
disabled	防止用户与编辑器交互。
invalid	将错误样式应用到编辑器。

插槽	描述
default	编辑器内容和工具栏组件。如果省略，将使用标准工具栏和空内容区域。

属性	描述
data-flux-editor	应用于根元素的样式和标识。

编辑器工具栏项目的容器。可用于自定义工具栏布局。

属性	描述
items	要显示的工具栏项目的空格分隔列表。使用 \| 作为分隔符，使用 ~ 作为间距符。如果未提供，则显示默认工具栏。

插槽	描述
default	工具栏项目、分隔符和间距符。使用此插槽创建完全自定义的工具栏。

flux:editor.button

属性	描述
icon	在按钮中显示的图标名称。
iconVariant	要显示的图标变体。选项：mini、micro、outline。默认：mini（无插槽）或 micro（有插槽）。
tooltip	悬停在按钮上时在工具提示中显示的文本。
disabled	防止与按钮交互。

插槽	描述
default	在按钮内显示的内容。如果与图标一起提供，图标将显示在此内容之前。

flux:editor.content

编辑器可编辑内容的容器。通常在创建自定义编辑器布局时使用。

插槽	描述
default	编辑器的初始 HTML 内容。此内容将由编辑器处理和管理。

可在 `toolbar` 属性中引用或直接在自定义工具栏中使用的可用工具栏项目。

组件	描述
heading	标题级别选择器。
bold	粗体文本格式化。
italic	斜体文本格式化。
strike	删除线文本格式化。
underline	下划线文本格式化。
bullet	项目符列表。
ordered	编号列表。
blockquote	引用块格式化。
code	代码块格式化。
link	链接插入。
align	文本对齐选项。
undo	撤销上一个操作。
redo	重做上一个操作。

富文本编辑器

配置项目

自定义项目

自定义

设置监听器

注册扩展

禁用扩展

访问实例

相关组件

参考