Skip to content

Inline 工具栏

Inline Editor 通过 toolbar: InlineToolbarConfig 控制工具栏与扩展注册。

默认

ts
{ undoRedo: true, textFormat: true, link: true }

全部开关

注册的扩展说明
undoRedoStarterKit undoRedo撤销 / 重做
headingStarterKit heading(levels 1–6)标题级别
textFormatStarterKit bold / italic / strike + Underline文本格式
listStarterKit bulletList / orderedList + TaskList/Item有序 / 无序 / 任务列表
alignTextAlign(heading + paragraph)对齐
linkLink 扩展 + 链接气泡(showLinkBubble插入链接
clearFormat—(仅按钮,不额外注册扩展)清除格式
fontTextStyle + FontFamily + FontSize字体族与字号
codeBlockcodeBlockLowlight代码块

规则toolbar.x !== true 时,对应按钮隐藏且扩展不注册。gate 由 resolveInlineGates 从 Registry 的 inlineToolbarSlugs 推导;undoRedo / heading / clearFormat 共享 inline-starter capability,它带 inlineAlways: true,因此 StarterKit 基座总会注册,只是内部子扩展按 gate 开关。

另外,placeholder prop 非空时会额外注册 inline-placeholderYanivPlaceholder);它不受 toolbar 控制。

示例

vue
<YanivInlineEditor
  v-model:content="html"
  mode="edit"
  placeholder="写评论…"
  :toolbar="{
    undoRedo: true,
    heading: true,
    textFormat: true,
    list: true,
    align: true,
    link: true,
    clearFormat: true,
    font: false,
    codeBlock: false,
  }"
/>

自定义插槽

使用 #toolbar 插槽 + 原子组件自行拼装,见 Inline 按需拼装

预览

mode="preview" 时不渲染内置工具栏与 #toolbar slot。

相关