tipex下载tipex源码下载

tipex

其他源码

1.0.0

下载

蒂佩克斯

Tipex 是专为 Svelte 量身定制的高级富文本编辑器，采用强大的框架 Tiptap 和 Prosemirror 精心设计。它使开发人员能够轻松地制作富文本编辑器，将他们从错综复杂的底层技术、样式管理和相关复杂性中解放出来。

Svelte5 和符文模式已激活！？

主要特点

Svelte 5 Ready ：使用 Svelte 5 的最新功能（包括符文和片段）构建
可定制的控制：灵活的控制系统，具有默认和自定义选项
插件架构：可通过 Tiptap 扩展进行扩展
响应式：在桌面和移动设备上都能很好地工作
浮动菜单：上下文感知浮动工具栏可增强编辑体验
链接管理：具有预览和编辑功能的内置链接处理
主题支持：使用 CSS 变量和实用程序类轻松设计样式
性能优化：利用 Svelte 的反应性实现流畅的编辑
TypeScript 支持：完整的 TypeScript 支持，带来更好的开发体验

安装

从 NPM 安装软件包：

 npm install“@friendofsvelte/tipex”

基本用法

导入组件并在您的组件中使用它：

 <script lang="ts">从“@friendofsvelte/tipex”导入{Tipex}；        let body = `<p>此<a target="_blank" rel="noopener noreferrer" href="">内容</a>由<a target="_blank" rel="noopener noreferrer" href="编写http://bishwas.net/">Bishwas</a> 于 2023 年。</p>`;</script>

<蒂佩克斯
     {body} 控制 floatstyle="margin-top: 1rem; margin-bottom: 0;"class="h-[70vh] 边框 border-neutral-200"/>

核心概念

控制方式

Tipex 提供两种控制模式：

默认控件（ controls={true} ）：

预建格式工具栏
可通过utilities属性进行自定义
非常适合快速实施

自定义控件（ controls={false} ）：

完全控制编辑器界面
使用controlComponent进行自定义实现
专门用例的理想选择

扩展系统

Tipex 利用 Tiptap 的扩展系统来增强功能：

从“@friendofsvelte/tipex”导入{ Tipex };从“@tiptap/extension-text-align”导入{ TextAlign };const extensions = [TextAlign.configure({types: ['标题', '段落'],} ),];//在组件中使用<Tipex {extensions} />

浮动菜单

浮动菜单提供上下文感知格式选项：

 <Tipex float /> // 启用浮动菜单

高级用法

定制头部和脚部部分

使用 Svelte 5 代码片段在编辑器上方或下方添加自定义组件：

 <script lang="ts">从“@friendofsvelte/tipex”导入{Tipex}；        让正文=“”;</脚本>

<Tipex {正文}>
    {#snippet head（编辑）}
        <自定义标题{编辑器} />
    {/片段}

        {#片段脚（编辑）}
        <自定义页脚{编辑} />
    {/片段}
</Tipex>

自定义实用程序

添加自定义控件，同时保留默认工具栏：

 <script lang="ts">从“@friendofsvelte/tipex”导入{Tipex}；        让正文=“”;</脚本>

<Tipex {body} 控件>
    {#snippet 实用程序（编辑器）}
        <自定义格式{编辑器} />
    {/片段}
</Tipex>

自定义控制组件

创建完全自定义的控制界面：

 <script lang="ts">从“@friendofsvelte/tipex”导入{Tipex}；        让正文=“”;</脚本>

<Tipex {body} 控件={false}>
    {#snippet controlComponent（编辑器）}
        <MyCustomControls {编辑器} />
    {/片段}
</Tipex>