提示

Tipex是专门为斯维尔特设计的高级丰富文本编辑器, 精心设计与强健的 框架 提示 财务报告和审定财务报表 亲子它赋予开发者权力 毫不费力地编织出丰富的文本编辑器,使他们摆脱基础技术、风格管理的复杂性, 和相关的复杂情况.

Svelte 5 和 runes 模式启动

关键特性

• 🚀 Svelte 5 准备: 以斯维尔特5的最新特征所建,包括runes,片段和现代反应
• 🎨 智能控制系统: 自动检测是否根据 controlComponent 道具
• 🔌 可扩展的建筑: 通过 Tiptap 的扩展系统完全可扩展, 包含默认扩展
• 📱 移动响应: 优化桌面和移动两种易触交互
• 🎯 上下文软件浮动菜单: 文本选择中出现的智能浮动工具栏
• 🔗 高级链接管理: 内置链接编辑与剪贴板集成和视觉反馈
• ✅ 任务列表: 交互式复选框和任务管理的原生支持
• 🎭 现代主题: 使用 OKLCH 颜色和 CSS 自定义属性使用 Tailwind CSS v4 构建
• ⚡ 业绩优化:收发机Svelte的回放和高效的DOM更新
• 💼 完整类型脚本支持: 具有综合类型定义的完整类型安全性
• 🎨 重点管理: 有视觉反馈和无障碍支持的智能焦点检测

安装

安装软件包从 国家预防机制数字 :

npm install "@friendofsvelte/tipex"

Tiptap v3 是一个对等依赖. npm 7+和 pnpm 自动安装; 否则同时安装 :

npm install @tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/extensions @tiptap/extension-list @tiptap/extension-image @tiptap/extension-code-block @tiptap/extension-code-block-lowlight @tiptap/extension-floating-menu

检查出来 Tipex 编辑器变量 联 合 国 现场预览 用于实例显示您可以用 Tipex Svelte 文本编辑器构建的内容,包括多个主题和配置.

基本用途

导入组件和样式, 然后在您的 Svelte 组件中使用 :

<script lang="ts">
    import { Tipex } from '@friendofsvelte/tipex';
    import '@friendofsvelte/tipex/styles/index.css';

    let body = `<h1>My Project Notes</h1>
    <p>I've been working on this <strong>new feature</strong> for the past few days. 
    It's been quite <em>challenging</em> but I think I'm making good progress.</p>
    
    <h2>Things I need to do</h2>
    <ul data-type="taskList">
        <li data-type="taskItem" data-checked="true">Set up the development environment</li>
        <li data-type="taskItem" data-checked="false">Write the core functionality</li>
        <li data-type="taskItem" data-checked="false">Add error handling</li>
    </ul>
    
    <p>Check out the <a href="https://tiptap.dev/">TipTap documentation</a> for more features!</p>`;
</script>

<Tipex
    {body}
    floating
    focal
    style="margin-top: 1rem; margin-bottom: 0;"
    class="h-[70vh] border border-neutral-200/80"
/>

核心概念

控制系统

Tipex 具有简单而灵活的控制系统:

1. 默认控件 (否时自动) controlComponent 提供:

   • 带有必要编辑工具的预建格式工具栏
   • 内建的公用按钮(复制、链接管理)
   • 适合快速执行

2. 自定义控制 (当 controlComponent 提供片段:

   • 完全控制编辑器接口
   • 完全定制自由
   • 可以扩展默认控制或创建全新的接口
   • 专门使用案件的理想

3. 无控件 (当 controlComponent={null} 明确设置如下:

   • 完全隐藏所有控制元素
   • 提供干净、最小的编辑器接口
   • 适合只读或嵌入式方案

这种简单的做法在保持使用方便的同时提供了最大的灵活性.

扩展系统

Tipex为增强功能而利用了Tiptap的扩展系统. 这个 extensions prop完全取代了默认的扩展(包括StarterKit). 扩展默认值, 展开 defaultExtensions 并添加自己的:

<script lang="ts">
    import { Tipex, defaultExtensions } from '@friendofsvelte/tipex';
    import { TextAlign } from '@tiptap/extension-text-align';
    import { Highlight } from '@tiptap/extension-highlight';

    // Extend default extensions
    const customExtensions = [
        ...defaultExtensions,
        TextAlign.configure({
            types: ['heading', 'paragraph'],
            alignments: ['left', 'center', 'right', 'justify']
        }),
        Highlight.configure({
            multicolor: true
        })
    ];

    let body = '';
</script>

<Tipex {body} extensions={customExtensions} />

如果你通过了完全的习惯 extensions 数组,没有保存任何默认值 —— 提供编辑器所需的一切(文档、段落和文本节点,例如通过您自己的节点) StarterKit) (中文(简体) ).

浮动菜单

浮动菜单提供了文本选择时出现的对上下文有敏感认识的格式选项:

<Tipex floating /> <!-- Enables the floating menu -->

重点管理

Tipex 包含有视觉反馈的智能焦点检测:

<Tipex focal />
<!-- Default: shows focus ring -->
<Tipex !focal />
<!-- Disables focus ring -->

带有 Tailwind CSS v4 的现代主题

Tipex 以 尾风 CSS v4 并使用现代的 OKLCH 颜色来提高颜色的准确性和一致性。 主题系统使用 CSS 自定义属性, 您可以覆盖 :

@import '@friendofsvelte/tipex/styles/index.css';

@theme {
    /* Override Tipex colors */
    --color-tipex-primary-500: oklch(0.65 0.11 285); /* Custom purple */
    --color-tipex-success-500: oklch(0.647 0.208 142.425); /* Custom green */

    /* Custom spacing */
    --spacing-tipex-md: 1.25rem;
    --spacing-tipex-lg: 2rem;
}

可用的 CSS 自定义属性

• 颜色数字 : --color-tipex-{50-950}, (中文(简体) ), --color-tipex-primary-{50-950}, (中文(简体) ), --color-tipex-success-{50-950}
• 间距数字 : --spacing-tipex-{xs,sm,md,lg,xl,2xl}
• 大小数字 : --size-tipex-{1-12}
• 类型数字 : --text-tipex-{xs,sm,base,lg,xl,2xl}
• 边框半径数字 : --radius-tipex-{sm,md}
• Z 指数数字 : --z-tipex-{floating,controls}

高级使用

自定义头和脚节

使用 Svelte 5 片断在编辑器上或下方添加自定义组件 :

<script lang="ts">
    import { Tipex } from '@friendofsvelte/tipex';

    let body = '';
</script>

<Tipex {body}>
    {#snippet head(editor)}
        <CustomHeader {editor} />
    {/snippet}

    {#snippet foot(editor)}
        <CustomFooter {editor} />
    {/snippet}
</Tipex>

扩展默认控件

在保留默认工具栏的同时添加自定义工具栏 :

<script lang="ts">
    import { Tipex, Controls } from '@friendofsvelte/tipex';

    let body = '';
</script>

<Tipex {body}>
    {#snippet controlComponent(tipex)}
        <Controls {tipex}>
            <!-- Built-in utilities: copy HTML and link editing with clipboard integration -->
            <!-- Add custom utilities here -->
            <button class="tipex-edit-button tipex-button-rigid" aria-label="Export PDF">
                📄 Export
            </button>
        </Controls>
    {/snippet}
</Tipex>

自定义控制组件

创建一个完全自定义的控制界面 :

<script lang="ts">
    import { Tipex } from '@friendofsvelte/tipex';

    let body = '';
</script>

<Tipex {body}>
    {#snippet controlComponent(tipex)}
        <div class="my-custom-controls">
            <button onclick={() => tipex.commands.toggleBold()}>
                <strong>B</strong>
            </button>
            <button onclick={() => tipex.commands.toggleItalic()}>
                <em>I</em>
            </button>
            <button onclick={() => tipex.commands.toggleTaskList()}> ✅ Tasks </button>
        </div>
    {/snippet}
</Tipex>

无控件( 最小编辑器)

隐藏干净、最小编辑界面的所有控件 :

<script lang="ts">
    import { Tipex } from '@friendofsvelte/tipex';

    let body = '';
</script>

<!-- Editor with no controls - perfect for embedded or read-only scenarios -->
<Tipex {body} controlComponent={null} />

输入密钥行为( 单行对双行间距)

按键 Enter 启动一新段落( e)<p>),同时 Shift+Enter 插入硬换行符(<br>)在本段中。 这是标准ProseMirror/Tiptap行为,与大多数丰富的文本编辑器如何工作相匹配.

新建段落可以看起来"双空",因为Tipex的默认样式给每个段落一个下边边:规则 .tipex-editor-section .ProseMirror p 应用 margin-bottom: var(--spacing-tipex-md) (默认为1rem). 根据你的愿望,有两种方法可以改变这一点:

备选案文A:保留段落,去除视觉空白(CSS)

覆盖您样式表中的段落边距 :

@import '@friendofsvelte/tipex/styles/index.css';

.tipex-editor .ProseMirror p {
    margin-bottom: 0;
}

此保存默认值 Enter = 新的段落语义(结构化内容更好),只去除段落之间的间隔.

备选案文B:制造 Enter 插入硬折叠段,而不是新段落

添加一个重映射的小扩展名 Enter 至硬断:

<script lang="ts">
    import { Tipex, defaultExtensions } from '@friendofsvelte/tipex';
    import { Extension } from '@tiptap/core';

    const HardBreakOnEnter = Extension.create({
        name: 'hardBreakOnEnter',
        addKeyboardShortcuts() {
            return {
                Enter: () => this.editor.commands.setHardBreak()
            };
        }
    });

    let body = '';
</script>

<Tipex {body} extensions={[...defaultExtensions, HardBreakOnEnter]} />

使用此扩展名, 输入 a按钮 Enter输入 b 生产 <p>a<br>b</p> 而不是两段。 请注意,这改变了文档结构:所有内容都保留在一个段落中,因此,如果您仍然想要语义段落,则选择备选案文A.

软件配置( P)

根据实际数 TipexProps 界面,这里是所有可用的属性 :

布尔道具与内存

您可以使用 ! 前缀 :

<Tipex !focal !floating /> <!-- Disables focus ring and floating menu -->

获取编辑器内容

使用 Svelte 5 操作访问编辑器实例及其内容 :

<script lang="ts">
    import { Tipex } from '@friendofsvelte/tipex';
    import type { Editor } from '@tiptap/core';

    let body = '';
    let editor: Editor | undefined = $state();

    // Reactive HTML content
    const htmlContent = $derived(editor?.getHTML() ?? '');

    // Reactive text content (no HTML tags)
    const textContent = $derived(editor?.getText() ?? '');

    // Reactive word count
    const wordCount = $derived(
        editor
            ?.getText()
            .split(/\s+/)
            .filter((word) => word.length > 0).length ?? 0
    );
</script>

<Tipex {body} bind:tipex={editor} />

<div class="editor-stats">
    <p>Words: {wordCount}</p>
    <p>Characters: {textContent.length}</p>
</div>

<details>
    <summary>HTML Output</summary>
    <pre>{htmlContent}</pre>
</details>

文档

全面文件,访问 tipex.pages.dev (英语)。 。 。 .

关于斯维尔特的朋友

斯维尔特的朋友 是一个社区驱动的项目,帮助斯维尔特开发者找到和 开发惊人的斯维尔特资源。 我们的任务是为残疾人创造高质量、可维持和可获取的工具 斯维尔特生态系统.

加入社区

• {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}我们建立我们的仓库
• * 向项目捐款
• 分享你的想法
• * 人人开放会员资格

如果你喜欢这个项目,你可以通过为这个项目捐款而成为朋友之一. 成员开放 每个人.

许可证

MIT许可. 版权 (c) 2023-2024 Friend of Svelte.