YanivInlineEditor API

导入

import { YanivInlineEditor } from "@yanivjs/yaniv-editor/inline";
import "@yanivjs/yaniv-editor/inline.css";

Props

Prop	类型	默认值	说明
content	string	"<p></p>"	HTML 内容，支持 v-model:content
mode	"edit" | "preview"	"edit"	运行状态
colorMode	"light" | "dark" | "auto"	"light"	颜色模式
toolbar	InlineToolbarConfig	撤销/重做 + 文本格式 + 链接	工具栏控件
placeholder	string	无	空段落提示
extraExtensions	AnyExtension[]	[]	额外 Tiptap 扩展
editorProps	Record<string, unknown>	无	Tiptap editor props
locale	string	"zh-CN"	语言代码
zIndexBase	number	1000	浮层 z-index 基准；不触发 session 重建

placeholder 与 extraExtensions 变化会更新 sessionKey 并触发 session 重建（内容会快照保留）。

浮层挂载与 token 详见 Z-Index 与浮层。

Events

事件	载荷	说明
update:content	string	编辑器 update 时派发 editor.getHTML()

content + update:content 构成 v-model:content。Inline 的内容协议是 HTML 字符串，不接受 JSONContent。

Slots

插槽	作用域	说明
toolbar	{ editor: Editor | null, config: InlineToolbarConfig }	替换内置 InlineToolbar；不传时渲染内置工具栏

<YanivInlineEditor v-model:content="html">
  <template #toolbar="{ editor, config }">
    <InlineToolbar v-if="editor && config" :editor="editor" :config="config" />
  </template>
</YanivInlineEditor>

插槽只在 chromePolicy.showInlineToolbar 为 true 时渲染，即 mode="edit" 且 toolbar 中至少有一个 Registry 声明过的 slug 为 true。

示例

<YanivInlineEditor v-model:content="html" mode="edit" />
<YanivInlineEditor :content="html" mode="preview" color-mode="auto" />

自定义工具栏：

<YanivInlineEditor
  v-model:content="html"
  :toolbar="{ undoRedo: true, textFormat: true, link: true, list: true }"
/>

mode="preview" 时不渲染内置工具栏和自定义工具栏 slot。内容仍可选择，链接保持正常文档链接行为。

高级导出

inline 入口还导出用于自定义 inline shell 的构建块：

import {
  InlineToolbar,
  UndoRedoButton,
  LinkButton,
  buildExtensions,
  resolveInlineGates,
  resolveShowInlineToolbar,
  CAPABILITIES,
  provideYanivEditor,
  useYanivEditor,
} from "@yanivjs/yaniv-editor/inline";

完整自定义 shell 示例见 Inline 按需拼装。