diff --git a/apps/web-antdv-next/package.json b/apps/web-antdv-next/package.json
index 00a37a8..19390bd 100644
--- a/apps/web-antdv-next/package.json
+++ b/apps/web-antdv-next/package.json
@@ -29,6 +29,17 @@
"@antdv-next/icons": "catalog:",
"@milkdown/crepe": "catalog:",
"@tanstack/vue-query": "catalog:",
+ "@tiptap/extension-image": "catalog:",
+ "@tiptap/extension-link": "catalog:",
+ "@tiptap/extension-placeholder": "catalog:",
+ "@tiptap/extension-table": "catalog:",
+ "@tiptap/extension-table-cell": "catalog:",
+ "@tiptap/extension-table-header": "catalog:",
+ "@tiptap/extension-table-row": "catalog:",
+ "@tiptap/extension-text-align": "catalog:",
+ "@tiptap/extension-underline": "catalog:",
+ "@tiptap/starter-kit": "catalog:",
+ "@tiptap/vue-3": "catalog:",
"@vben-core/menu-ui": "workspace:*",
"@vben-core/shadcn-ui": "workspace:*",
"@vben/access": "workspace:*",
diff --git a/apps/web-antdv-next/src/components/richText/KtTiptapHtmlEditor.scss b/apps/web-antdv-next/src/components/richText/KtTiptapHtmlEditor.scss
new file mode 100644
index 0000000..12ce7b4
--- /dev/null
+++ b/apps/web-antdv-next/src/components/richText/KtTiptapHtmlEditor.scss
@@ -0,0 +1,134 @@
+.kt-tiptap-editor {
+ display: flex;
+ min-height: var(--kt-tiptap-min-height, 360px);
+ width: 100%;
+ flex-direction: column;
+ overflow: hidden;
+ border: 1px solid hsl(var(--border));
+ border-radius: 8px;
+ background: hsl(var(--background));
+
+ &--disabled {
+ opacity: 0.72;
+ }
+
+ &__toolbar {
+ display: flex;
+ flex: 0 0 auto;
+ align-items: center;
+ gap: 4px;
+ padding: 8px 10px;
+ border-bottom: 1px solid hsl(var(--border));
+ background: hsl(var(--background));
+ }
+
+ &__toolbar-button {
+ display: inline-flex;
+ width: 30px;
+ height: 30px;
+ align-items: center;
+ justify-content: center;
+
+ &--active {
+ color: hsl(var(--primary));
+ background: hsl(var(--accent));
+ }
+ }
+
+ &__toolbar-group {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ }
+
+ &__toolbar-icon {
+ width: 16px;
+ height: 16px;
+ }
+
+ &__content {
+ min-height: calc(var(--kt-tiptap-min-height, 360px) - 47px);
+ flex: 1;
+ overflow: auto;
+ }
+
+ &__prosemirror {
+ min-height: calc(var(--kt-tiptap-min-height, 360px) - 47px);
+ padding: 18px 22px;
+ outline: none;
+
+ > *:first-child {
+ margin-top: 0;
+ }
+
+ > *:last-child {
+ margin-bottom: 0;
+ }
+
+ p {
+ margin: 0 0 12px;
+ line-height: 1.75;
+ }
+
+ h1,
+ h2,
+ h3 {
+ margin: 18px 0 12px;
+ font-weight: 600;
+ line-height: 1.35;
+ }
+
+ blockquote {
+ margin: 12px 0;
+ padding-left: 14px;
+ border-left: 3px solid hsl(var(--border));
+ color: hsl(var(--muted-foreground));
+ }
+
+ pre {
+ overflow: auto;
+ padding: 14px;
+ border-radius: 6px;
+ background: hsl(var(--muted));
+ font-size: 13px;
+ line-height: 1.6;
+ }
+
+ img {
+ max-width: 100%;
+ height: auto;
+ border-radius: 6px;
+ }
+
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ table-layout: fixed;
+ }
+
+ th,
+ td {
+ min-width: 80px;
+ padding: 8px 10px;
+ border: 1px solid hsl(var(--border));
+ vertical-align: top;
+ }
+
+ th {
+ background: hsl(var(--muted));
+ font-weight: 600;
+ }
+
+ .is-empty::before {
+ float: left;
+ height: 0;
+ color: hsl(var(--muted-foreground));
+ content: attr(data-placeholder);
+ pointer-events: none;
+ }
+ }
+
+ .ProseMirror-selectednode {
+ outline: 2px solid hsl(var(--primary));
+ }
+}
diff --git a/apps/web-antdv-next/src/components/richText/KtTiptapHtmlEditor.spec.tsx b/apps/web-antdv-next/src/components/richText/KtTiptapHtmlEditor.spec.tsx
new file mode 100644
index 0000000..3018cb8
--- /dev/null
+++ b/apps/web-antdv-next/src/components/richText/KtTiptapHtmlEditor.spec.tsx
@@ -0,0 +1,381 @@
+/* @vitest-environment happy-dom */
+/* eslint-disable vue/one-component-per-file */
+
+import type { ComponentPublicInstance, Ref } from 'vue';
+
+import { mount } from '@vue/test-utils';
+import { defineComponent, h, nextTick, ref } from 'vue';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import KtTiptapHtmlEditor from './KtTiptapHtmlEditor';
+
+type FakeEditorOptions = {
+ content?: string;
+ editable?: boolean;
+ onBlur?: () => void;
+ onFocus?: () => void;
+ onUpdate?: (payload: { editor: FakeEditor }) => void;
+};
+
+type TiptapExpose = ComponentPublicInstance & {
+ getHtml: () => string;
+ setHtml: (value: string) => void;
+};
+
+/**
+ * 模拟 Tiptap Editor 的最小行为，支持组件测试 HTML 同步和禁用态。
+ */
+class FakeEditor {
+ public html = '';
+
+ public commands = {
+ focus: () => true,
+ setContent: (value: string) => {
+ this.html = value;
+ return true;
+ },
+ };
+
+ public destroyed = false;
+
+ public editable = true;
+
+ public options: FakeEditorOptions;
+
+ /**
+ * 记录传入配置并初始化测试用 HTML。
+ *
+ * @param options 编辑器初始化配置，测试只关心内容、可编辑态和更新回调。
+ */
+ constructor(options: FakeEditorOptions) {
+ this.options = options;
+ this.html = options.content || '';
+ this.editable = options.editable !== false;
+ }
+
+ public chain = () => ({
+ focus: () => ({
+ run: () => true,
+ setImage: ({ src }: { src: string }) => ({
+ run: () => {
+ this.html = `
`;
+ this.options.onUpdate?.({ editor: this });
+ return true;
+ },
+ }),
+ setLink: ({ href }: { href: string }) => ({
+ run: () => {
+ this.html = `${href}
`;
+ this.options.onUpdate?.({ editor: this });
+ return true;
+ },
+ }),
+ toggleBold: () => ({
+ run: () => {
+ this.html = '粗体
';
+ this.options.onUpdate?.({ editor: this });
+ return true;
+ },
+ }),
+ }),
+ });
+
+ /**
+ * 标记编辑器已销毁，便于组件卸载路径保持可调用。
+ */
+ public destroy() {
+ this.destroyed = true;
+ }
+
+ /**
+ * 返回当前 HTML，模拟 Tiptap 的 getHTML。
+ */
+ public getHTML() {
+ return this.html;
+ }
+
+ /**
+ * 查询命令激活态，测试中默认未激活。
+ */
+ public isActive() {
+ return false;
+ }
+
+ /**
+ * 同步只读状态给测试替身。
+ *
+ * @param value false 表示 readonly/disabled。
+ */
+ public setEditable(value: boolean) {
+ this.editable = value;
+ }
+}
+
+const editorRefs: Array> = [];
+
+vi.mock('@tiptap/vue-3', () => ({
+ EditorContent: defineComponent({
+ name: 'MockEditorContent',
+ props: {
+ editor: {
+ default: null,
+ type: Object,
+ },
+ },
+ /**
+ * 渲染当前 FakeEditor HTML，使测试能观察组件传入内容。
+ *
+ * @param props EditorContent 入参，包含当前编辑器实例。
+ */
+ setup(props) {
+ return () =>
+ h('div', {
+ class: 'kt-tiptap-editor__prosemirror ProseMirror',
+ innerHTML: (props.editor as FakeEditor | null)?.getHTML() || '',
+ });
+ },
+ }),
+ useEditor: (options: FakeEditorOptions) => {
+ const editor = ref(new FakeEditor(options));
+ editorRefs.push(editor);
+ return editor;
+ },
+}));
+
+vi.mock('antdv-next', () => ({
+ Button: defineComponent({
+ name: 'MockButton',
+ props: {
+ disabled: Boolean,
+ type: {
+ default: undefined,
+ type: String,
+ },
+ },
+ emits: ['click'],
+ /**
+ * 用原生 button 替代 antdv-next Button，保留 attrs/disabled/click。
+ *
+ * @param props 按钮入参，测试只读取 disabled。
+ * @param context Vue setup context，透传 attrs 和 slots。
+ * @param context.attrs 透传到原生 button 的属性。
+ * @param context.emit click 事件发送器。
+ * @param context.slots 按钮默认插槽。
+ */
+ setup(props, { attrs, emit, slots }) {
+ return () =>
+ h(
+ 'button',
+ {
+ ...attrs,
+ disabled: props.disabled,
+ onClick: () => emit('click'),
+ type: 'button',
+ },
+ slots.default?.(),
+ );
+ },
+ }),
+ Divider: defineComponent({
+ name: 'MockDivider',
+ /**
+ * 渲染工具栏分隔符占位。
+ */
+ setup() {
+ return () => h('span', { class: 'mock-divider' });
+ },
+ }),
+ Input: defineComponent({
+ name: 'MockInput',
+ props: {
+ value: {
+ default: '',
+ type: String,
+ },
+ },
+ emits: ['update:value'],
+ /**
+ * 用 input 替代 antdv-next Input，保留 value 双向更新。
+ *
+ * @param props 输入框入参，测试只使用 value。
+ * @param context Vue setup context，发送 update:value。
+ * @param context.emit update:value 事件发送器。
+ */
+ setup(props, { emit }) {
+ return () =>
+ h('input', {
+ value: props.value,
+ onInput: (event: Event) =>
+ emit('update:value', (event.target as HTMLInputElement).value),
+ });
+ },
+ }),
+ Modal: defineComponent({
+ name: 'MockModal',
+ props: {
+ open: Boolean,
+ title: {
+ default: '',
+ type: String,
+ },
+ },
+ emits: ['cancel', 'ok', 'update:open'],
+ /**
+ * 模拟 Modal，只在 open=true 时渲染内容。
+ *
+ * @param props 弹窗入参，测试仅关心 open。
+ * @param context Vue setup context。
+ * @param context.slots 弹窗默认插槽。
+ */
+ setup(props, { slots }) {
+ return () =>
+ props.open ? h('div', { role: 'dialog' }, slots.default?.()) : null;
+ },
+ }),
+ Space: defineComponent({
+ name: 'MockSpace',
+ /**
+ * 以 div 包装 Space 内容。
+ *
+ * @param _props 未使用的 Space props。
+ * @param context Vue setup context，读取默认 slot。
+ * @param context.slots Space 默认插槽。
+ */
+ setup(_props, { slots }) {
+ return () => h('div', slots.default?.());
+ },
+ }),
+ Tooltip: defineComponent({
+ name: 'MockTooltip',
+ props: {
+ title: {
+ default: '',
+ type: String,
+ },
+ },
+ /**
+ * 直接渲染 Tooltip 默认 slot，避免测试依赖浮层实现。
+ *
+ * @param _props 未使用的 Tooltip props。
+ * @param context Vue setup context，读取默认 slot。
+ * @param context.slots Tooltip 默认插槽。
+ */
+ setup(_props, { slots }) {
+ return () => h('span', slots.default?.());
+ },
+ }),
+}));
+
+vi.mock('@vben/icons', () => ({
+ IconifyIcon: defineComponent({
+ name: 'MockIconifyIcon',
+ props: {
+ icon: {
+ default: '',
+ type: String,
+ },
+ },
+ /**
+ * 渲染可识别的图标占位。
+ *
+ * @param props 图标入参，测试不读取但保留 data 属性。
+ */
+ setup(props) {
+ return () => h('i', { 'data-icon': props.icon });
+ },
+ }),
+}));
+
+describe('ktTiptapHtmlEditor', () => {
+ beforeEach(() => {
+ editorRefs.length = 0;
+ });
+
+ it('renders incoming html content', () => {
+ const wrapper = mount(KtTiptapHtmlEditor, {
+ props: {
+ modelValue: '旧正文
',
+ },
+ });
+
+ expect(wrapper.find('.kt-tiptap-editor__prosemirror').html()).toContain(
+ '旧正文
',
+ );
+ });
+
+ it('emits normalized html from setHtml', async () => {
+ const wrapper = mount(KtTiptapHtmlEditor, {
+ props: {
+ modelValue: '旧正文
',
+ },
+ });
+
+ (wrapper.vm as unknown as TiptapExpose).setHtml(
+ '新标题
新正文
',
+ );
+ await nextTick();
+
+ expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([
+ '新标题
新正文
',
+ ]);
+ expect(wrapper.emitted('change')?.at(-1)).toEqual([
+ '新标题
新正文
',
+ '旧正文
',
+ ]);
+ expect((wrapper.vm as unknown as TiptapExpose).getHtml()).toBe(
+ '新标题
新正文
',
+ );
+ });
+
+ it('marks disabled editor and disables bold command', () => {
+ const wrapper = mount(KtTiptapHtmlEditor, {
+ props: {
+ disabled: true,
+ modelValue: '旧正文
',
+ },
+ });
+
+ expect(wrapper.classes()).toContain('kt-tiptap-editor--disabled');
+ expect(
+ wrapper.find('[data-kt-tiptap-command="bold"]').attributes('disabled'),
+ ).toBeDefined();
+ });
+
+ it('syncs setHtml changes through a v-model parent', async () => {
+ const Parent = defineComponent({
+ name: 'TiptapParentHarness',
+ /**
+ * 建立父子 v-model 绑定，验证编辑器 emit 会回写父级状态。
+ */
+ setup() {
+ const html = ref('旧正文
');
+ const editorRef = ref(null);
+
+ return () => (
+
+
+
+
+
+ );
+ },
+ });
+
+ const wrapper = mount(Parent);
+ await wrapper.find('[data-testid="parent-update"]').trigger('click');
+ await nextTick();
+
+ expect(wrapper.find('[data-testid="parent-html"]').text()).toBe(
+ '新标题
新正文
',
+ );
+ });
+});
diff --git a/apps/web-antdv-next/src/components/richText/KtTiptapHtmlEditor.tsx b/apps/web-antdv-next/src/components/richText/KtTiptapHtmlEditor.tsx
new file mode 100644
index 0000000..877e969
--- /dev/null
+++ b/apps/web-antdv-next/src/components/richText/KtTiptapHtmlEditor.tsx
@@ -0,0 +1,588 @@
+import type { Editor } from '@tiptap/vue-3';
+
+import type { CSSProperties, PropType, VNodeChild } from 'vue';
+
+import { computed, defineComponent, onBeforeUnmount, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import Image from '@tiptap/extension-image';
+import Link from '@tiptap/extension-link';
+import Placeholder from '@tiptap/extension-placeholder';
+import { Table } from '@tiptap/extension-table';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
+import TableRow from '@tiptap/extension-table-row';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import StarterKit from '@tiptap/starter-kit';
+import { EditorContent, useEditor } from '@tiptap/vue-3';
+import { Button, Divider, Input, Modal, Space, Tooltip } from 'antdv-next';
+
+import './KtTiptapHtmlEditor.scss';
+
+const AButton = Button as any;
+const ADivider = Divider as any;
+const AInput = Input as any;
+const AModal = Modal as any;
+const ASpace = Space as any;
+const ATooltip = Tooltip as any;
+const TiptapEditorContent = EditorContent as any;
+
+export type KtTiptapHtmlEditorEmit = {
+ blur: [];
+ change: [value: string, previousValue: string];
+ focus: [];
+ 'update:modelValue': [value: string];
+};
+
+export interface KtTiptapHtmlEditorExpose {
+ getEditor: () => Editor | null;
+ getHtml: () => string;
+ setHtml: (value: string) => void;
+}
+
+export interface KtTiptapHtmlEditorProps {
+ disabled?: boolean;
+ minHeight?: number | string;
+ modelValue?: string;
+ placeholder?: string;
+ readonly?: boolean;
+}
+
+type ToolbarCommandKey =
+ | 'align-center'
+ | 'align-left'
+ | 'align-right'
+ | 'blockquote'
+ | 'bold'
+ | 'bullet-list'
+ | 'code-block'
+ | 'heading-2'
+ | 'image'
+ | 'italic'
+ | 'link'
+ | 'ordered-list'
+ | 'redo'
+ | 'table'
+ | 'underline'
+ | 'undo';
+
+type ToolbarCommand = {
+ icon: string;
+ isActive?: (editor: Editor) => boolean;
+ key: ToolbarCommandKey;
+ run: (editor: Editor) => void;
+ title: string;
+};
+
+/**
+ * 将数字高度转换为 CSS 长度，字符串保持原样。
+ *
+ * @param value 组件 minHeight 入参，支持像素数字或 CSS 长度字符串。
+ * @returns 可写入 CSS 变量的长度值。
+ */
+function toCssSize(value?: number | string) {
+ if (value === undefined || value === null || value === '') return undefined;
+ return typeof value === 'number' ? `${value}px` : value;
+}
+
+/**
+ * 读取编辑器当前 HTML，编辑器未初始化时回退到缓存值。
+ *
+ * @param editor 当前 Tiptap 编辑器实例。
+ * @param fallback 编辑器不可用时返回的 HTML。
+ * @returns 当前可提交给父级的 HTML。
+ */
+function readEditorHtml(editor: Editor | null | undefined, fallback: string) {
+ return editor?.getHTML() || fallback;
+}
+
+/**
+ * 渲染工具栏图标，统一使用 Iconify 图标来源。
+ *
+ * @param icon 图标名称，遵循 Vben/Iconify 的 lucide 命名。
+ * @returns 图标节点。
+ */
+const renderIcon = (icon: string) => (
+
+);
+
+export default defineComponent({
+ name: 'KtTiptapHtmlEditor',
+ props: {
+ disabled: {
+ default: false,
+ type: Boolean,
+ },
+ minHeight: {
+ default: 360,
+ type: [Number, String] as PropType,
+ },
+ modelValue: {
+ default: '',
+ type: String,
+ },
+ placeholder: {
+ default: '请输入正文内容',
+ type: String,
+ },
+ readonly: {
+ default: false,
+ type: Boolean,
+ },
+ },
+ emits: {
+ blur: () => true,
+ change: (_value: string, _previousValue: string) => true,
+ focus: () => true,
+ 'update:modelValue': (_value: string) => true,
+ },
+ /**
+ * 初始化 Tiptap HTML 编辑器，桥接 toolbar 命令、v-model 和 expose API。
+ *
+ * @param props 组件入参，包含 HTML、禁用态、占位符和最小高度。
+ * @param context Vue setup context，用于发送编辑器事件并暴露实例方法。
+ * @param context.emit 组件事件发送器，用于同步 HTML、change、focus 和 blur。
+ * @param context.expose 组件方法暴露器，用于公开编辑器实例与 HTML 读写方法。
+ */
+ setup(props, { emit, expose }) {
+ const currentHtml = ref(props.modelValue || '');
+ const linkModalOpen = ref(false);
+ const linkValue = ref('');
+ const imageModalOpen = ref(false);
+ const imageValue = ref('');
+
+ const readonlyState = computed(() => props.disabled || props.readonly);
+ const editorStyle = computed(() => ({
+ '--kt-tiptap-min-height': toCssSize(props.minHeight),
+ }));
+
+ /**
+ * 将编辑器 HTML 变更同步给父级，避免重复值产生循环事件。
+ *
+ * @param nextHtml 最新 HTML。
+ * @param previousHtml 变更前 HTML，用于 change 事件。
+ */
+ function emitHtmlChange(
+ nextHtml: string,
+ previousHtml = currentHtml.value,
+ ) {
+ if (nextHtml === previousHtml) {
+ currentHtml.value = nextHtml;
+ return;
+ }
+
+ currentHtml.value = nextHtml;
+ emit('update:modelValue', nextHtml);
+ emit('change', nextHtml, previousHtml);
+ }
+
+ const editor = useEditor({
+ content: currentHtml.value,
+ editable: !readonlyState.value,
+ editorProps: {
+ attributes: {
+ class: 'kt-tiptap-editor__prosemirror',
+ },
+ },
+ extensions: [
+ StarterKit.configure({
+ heading: {
+ levels: [1, 2, 3],
+ },
+ link: false,
+ underline: false,
+ }),
+ Link.configure({
+ autolink: true,
+ defaultProtocol: 'https',
+ openOnClick: false,
+ }),
+ Image.configure({
+ allowBase64: true,
+ inline: false,
+ }),
+ Table.configure({
+ resizable: true,
+ }),
+ TableRow,
+ TableHeader,
+ TableCell,
+ Underline,
+ TextAlign.configure({
+ types: ['heading', 'paragraph'],
+ }),
+ Placeholder.configure({
+ placeholder: props.placeholder,
+ }),
+ ],
+ onBlur: () => emit('blur'),
+ onFocus: () => emit('focus'),
+ onUpdate: ({ editor }) => {
+ emitHtmlChange(editor.getHTML());
+ },
+ });
+
+ /**
+ * 判断工具栏命令是否应禁用。
+ *
+ * @returns true 表示编辑器不可编辑或尚未初始化。
+ */
+ function isToolbarDisabled() {
+ return readonlyState.value || !editor.value;
+ }
+
+ /**
+ * 运行需要可编辑实例的命令。
+ *
+ * @param command 当前工具栏命令。
+ */
+ function runToolbarCommand(command: ToolbarCommand) {
+ const currentEditor = editor.value;
+ if (!currentEditor || readonlyState.value) return;
+ command.run(currentEditor);
+ }
+
+ /**
+ * 打开链接编辑弹窗，并预填当前选区链接。
+ */
+ function openLinkModal() {
+ const currentEditor = editor.value;
+ if (!currentEditor || readonlyState.value) return;
+
+ linkValue.value = currentEditor.getAttributes('link')?.href || '';
+ linkModalOpen.value = true;
+ }
+
+ /**
+ * 将链接弹窗中的 URL 应用到当前选区。
+ */
+ function confirmLink() {
+ const currentEditor = editor.value;
+ if (!currentEditor) return;
+
+ const href = linkValue.value.trim();
+ if (href) {
+ currentEditor
+ .chain()
+ .focus()
+ .extendMarkRange('link')
+ .setLink({ href })
+ .run();
+ } else {
+ currentEditor.chain().focus().extendMarkRange('link').unsetLink().run();
+ }
+ linkModalOpen.value = false;
+ }
+
+ /**
+ * 打开图片插入弹窗并清空上一轮输入。
+ */
+ function openImageModal() {
+ if (!editor.value || readonlyState.value) return;
+ imageValue.value = '';
+ imageModalOpen.value = true;
+ }
+
+ /**
+ * 将图片 URL 插入当前光标位置。
+ */
+ function confirmImage() {
+ const currentEditor = editor.value;
+ const src = imageValue.value.trim();
+ if (!currentEditor || !src) {
+ imageModalOpen.value = false;
+ return;
+ }
+
+ currentEditor.chain().focus().setImage({ src }).run();
+ imageModalOpen.value = false;
+ }
+
+ const toolbarCommands: ToolbarCommand[] = [
+ {
+ icon: 'lucide:bold',
+ isActive: (editor) => editor.isActive('bold'),
+ key: 'bold',
+ run: (editor) => editor.chain().focus().toggleBold().run(),
+ title: '加粗',
+ },
+ {
+ icon: 'lucide:italic',
+ isActive: (editor) => editor.isActive('italic'),
+ key: 'italic',
+ run: (editor) => editor.chain().focus().toggleItalic().run(),
+ title: '斜体',
+ },
+ {
+ icon: 'lucide:underline',
+ isActive: (editor) => editor.isActive('underline'),
+ key: 'underline',
+ run: (editor) => editor.chain().focus().toggleUnderline().run(),
+ title: '下划线',
+ },
+ {
+ icon: 'lucide:heading-2',
+ isActive: (editor) => editor.isActive('heading', { level: 2 }),
+ key: 'heading-2',
+ run: (editor) =>
+ editor.chain().focus().toggleHeading({ level: 2 }).run(),
+ title: '二级标题',
+ },
+ {
+ icon: 'lucide:list',
+ isActive: (editor) => editor.isActive('bulletList'),
+ key: 'bullet-list',
+ run: (editor) => editor.chain().focus().toggleBulletList().run(),
+ title: '无序列表',
+ },
+ {
+ icon: 'lucide:list-ordered',
+ isActive: (editor) => editor.isActive('orderedList'),
+ key: 'ordered-list',
+ run: (editor) => editor.chain().focus().toggleOrderedList().run(),
+ title: '有序列表',
+ },
+ {
+ icon: 'lucide:quote',
+ isActive: (editor) => editor.isActive('blockquote'),
+ key: 'blockquote',
+ run: (editor) => editor.chain().focus().toggleBlockquote().run(),
+ title: '引用',
+ },
+ {
+ icon: 'lucide:code-2',
+ isActive: (editor) => editor.isActive('codeBlock'),
+ key: 'code-block',
+ run: (editor) => editor.chain().focus().toggleCodeBlock().run(),
+ title: '代码块',
+ },
+ {
+ icon: 'lucide:align-left',
+ isActive: (editor) => editor.isActive({ textAlign: 'left' }),
+ key: 'align-left',
+ run: (editor) => editor.chain().focus().setTextAlign('left').run(),
+ title: '左对齐',
+ },
+ {
+ icon: 'lucide:align-center',
+ isActive: (editor) => editor.isActive({ textAlign: 'center' }),
+ key: 'align-center',
+ run: (editor) => editor.chain().focus().setTextAlign('center').run(),
+ title: '居中',
+ },
+ {
+ icon: 'lucide:align-right',
+ isActive: (editor) => editor.isActive({ textAlign: 'right' }),
+ key: 'align-right',
+ run: (editor) => editor.chain().focus().setTextAlign('right').run(),
+ title: '右对齐',
+ },
+ {
+ icon: 'lucide:link',
+ isActive: (editor) => editor.isActive('link'),
+ key: 'link',
+ run: openLinkModal,
+ title: '链接',
+ },
+ {
+ icon: 'lucide:image',
+ key: 'image',
+ run: openImageModal,
+ title: '图片',
+ },
+ {
+ icon: 'lucide:table',
+ key: 'table',
+ run: (editor) =>
+ editor
+ .chain()
+ .focus()
+ .insertTable({ cols: 3, rows: 3, withHeaderRow: true })
+ .run(),
+ title: '表格',
+ },
+ {
+ icon: 'lucide:undo-2',
+ key: 'undo',
+ run: (editor) => editor.chain().focus().undo().run(),
+ title: '撤销',
+ },
+ {
+ icon: 'lucide:redo-2',
+ key: 'redo',
+ run: (editor) => editor.chain().focus().redo().run(),
+ title: '重做',
+ },
+ ];
+
+ /**
+ * 渲染一个工具栏命令按钮。
+ *
+ * @param command 当前命令配置。
+ * @returns 工具栏按钮节点。
+ */
+ const renderCommandButton = (command: ToolbarCommand): VNodeChild => {
+ const currentEditor = editor.value;
+ const active = currentEditor ? command.isActive?.(currentEditor) : false;
+
+ return (
+
+ runToolbarCommand(command)}
+ shape="circle"
+ type="text"
+ >
+ {renderIcon(command.icon)}
+
+
+ );
+ };
+
+ /**
+ * 渲染格式工具栏，按文本、段落、插入、历史分组。
+ */
+ const renderToolbar = () => {
+ const groups = [
+ toolbarCommands.slice(0, 4),
+ toolbarCommands.slice(4, 8),
+ toolbarCommands.slice(8, 11),
+ toolbarCommands.slice(11, 14),
+ toolbarCommands.slice(14),
+ ];
+
+ return (
+
+ );
+ };
+
+ /**
+ * 渲染链接与图片输入弹窗。
+ */
+ const renderModals = () => (
+ <>
+ {
+ linkModalOpen.value = false;
+ }}
+ onOk={confirmLink}
+ open={linkModalOpen.value}
+ title="设置链接"
+ >
+
+
+ {
+ imageModalOpen.value = false;
+ }}
+ onOk={confirmImage}
+ open={imageModalOpen.value}
+ title="插入图片"
+ >
+
+
+
+ );
+
+ /**
+ * 返回当前编辑器实例。
+ */
+ function getEditor() {
+ return editor.value || null;
+ }
+
+ /**
+ * 读取当前 HTML。
+ */
+ function getHtml() {
+ return readEditorHtml(editor.value, currentHtml.value);
+ }
+
+ /**
+ * 通过 Tiptap 重新设置 HTML，并把规范化结果同步给父级。
+ *
+ * @param value 需要写入编辑器的 HTML 字符串。
+ */
+ function setHtml(value: string) {
+ const currentEditor = editor.value;
+ const previousHtml = currentHtml.value;
+ if (!currentEditor) {
+ emitHtmlChange(value, previousHtml);
+ return;
+ }
+
+ currentEditor.commands.setContent(value);
+ emitHtmlChange(readEditorHtml(currentEditor, value), previousHtml);
+ }
+
+ expose({
+ getEditor,
+ getHtml,
+ setHtml,
+ } satisfies KtTiptapHtmlEditorExpose);
+
+ watch(
+ () => props.modelValue,
+ (value = '') => {
+ const nextHtml = value || '';
+ if (nextHtml === currentHtml.value) return;
+
+ currentHtml.value = nextHtml;
+ editor.value?.commands.setContent(nextHtml);
+ },
+ );
+
+ watch(readonlyState, (value) => {
+ editor.value?.setEditable(!value);
+ });
+
+ onBeforeUnmount(() => {
+ editor.value?.destroy();
+ });
+
+ return () => (
+
+ {renderToolbar()}
+
+
+
+ {renderModals()}
+