ホーム>プログラミング関連>その他のソースコード
ダウンロード

タイペックス

Tipex は、Svelte 向けにカスタマイズされた高度なリッチ テキスト エディターであり、堅牢なフレームワーク Tiptap および Prosemirror を使用して細心の注意を払って設計されています。これにより、開発者はリッチ テキスト エディターを簡単に作成できるようになり、基盤となるテクノロジ、スタイル管理、および関連する複雑さの複雑さから解放されます。

Svelte5とルーンモードが有効になりました！ ?

主な特長

  • Svelte 5 Ready : ルーンやスニペットを含む Svelte 5 の最新機能で構築

  • カスタマイズ可能なコントロール: デフォルトとカスタムの両方のオプションを備えた柔軟なコントロール システム

  • プラグイン アーキテクチャ: Tiptap 拡張機能を通じて拡張可能

  • レスポンシブ: デスクトップとモバイルデバイスの両方でうまく動作します

  • フローティング メニュー: 編集エクスペリエンスを向上させるコンテキスト認識型フローティング ツールバー

  • リンク管理: プレビューおよび編集機能を備えた組み込みのリンク処理

  • テーマのサポート: CSS 変数とユーティリティ クラスを使用した簡単なスタイル設定

  • パフォーマンスの最適化: Svelte の反応性を活用してスムーズな編集を実現

  • TypeScript のサポート: 開発エクスペリエンスを向上させるための TypeScript の完全なサポート

インストール

NPM からパッケージをインストールします。

 npm インストール「@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=" によって書かれています。 2023 年の http://bishwas.net/">ビシュワス</a>。</p>`;</script>

<ティペックス
     {body} コントロール floatstyle="margin-top: 1rem; margin-bottom: 0;"class="h-[70vh] border border-neutral-200"/>

中心となる概念

制御モード

Tipex は 2 つの制御モードを提供します。

  1. デフォルトのコントロール( controls={true} ):

    • 事前に構築された書式設定ツールバー

    • utilitiesプロパティを通じてカスタマイズ可能

    • 迅速な導入に最適

  2. カスタム コントロール( controls={false} ):

    • エディターインターフェイスを完全に制御

    • カスタム実装にはcontrolComponent使用します

    • 特殊なユースケースに最適

拡張システム

Tipex は、Tiptap の拡張システムを活用して機能を強化しています。

 import { Tipex } from "@friendofsvelte/tipex";import { TextAlign } from '@tiptap/extension-text-align';const extensions = [TextAlign.configure({types: ['Heading', 'paragraph'],} ),];// コンポーネントで使用<Tipex {extensions} />

フローティングメニュー

フローティング メニューには、コンテキストを認識した書式設定オプションが用意されています。

 <Tipex float /> // フローティング メニューを有効にします

高度な使用法

カスタムの頭と足のセクション

Svelte 5 スニペットを使用して、エディターの上または下にカスタム コンポーネントを追加します。

 <script lang="ts"> "@friendofsvelte/tipex" から {Tipex} をインポートします。        let body = "";</script>

<ティペックス {体}>
    {#スニペットヘッド(編集者)}
        <CustomHeader {エディタ} />
    {/抜粋}

        {#スニペットフット(編集者)}
        <CustomFooter {エディタ} />
    {/抜粋}
</ティペックス>

カスタムユーティリティ

デフォルトのツールバーを維持したままカスタム コントロールを追加します。

 <script lang="ts"> "@friendofsvelte/tipex" から {Tipex} をインポートします。        let body = "";</script>

<Tipex {body} コントロール>
    {#スニペット ユーティリティ(エディタ)}
        <CustomFormatting {エディタ} />
    {/抜粋}
</ティペックス>

カスタムコントロールコンポーネント

完全にカスタムのコントロール インターフェイスを作成します。

 <script lang="ts"> "@friendofsvelte/tipex" から {Tipex} をインポートします。        let body = "";</script>

<Tipex {body} コントロール={false}>
    {#スニペット コントロールコンポーネント(エディター)}
        <MyCustomControls {エディタ} />
    {/抜粋}
</ティペックス>

ドキュメント

包括的なドキュメントについては、tipex.pages.dev にアクセスしてください。

フレンド オブ スヴェルトについて

Friend Of Svelte は、Svelte 開発者が素晴らしい Svelte リソースを見つけて開発できるようにするコミュニティ主導のプロジェクトです。私たちの使命は、Svelte エコシステム用の高品質で保守可能でアクセスしやすいツールを作成することです。

コミュニティに参加する

  • リポジトリにスターを付ける

  • プロジェクトに貢献する

  • アイデアを共有する

  • 誰でも参加できるオープンなメンバーシップ

このプロジェクトが気に入ったら、プロジェクトに貢献することで友達の一人になることができます。メンバーシップは誰でも参加できます。

ライセンス

MITライセンス取得済み。 Copyright (c) 2023-2024 Svelte の友人。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて