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>