unduh tipex - unduh kode sumber tipex

tipex

Kode sumber lainnya

1.0.0

Unduh

Tipex

Tipex berdiri sebagai editor teks kaya canggih yang dirancang untuk Svelte, dirancang dengan cermat dengan kerangka kerja Tiptap dan Prosemirror yang kuat. Ini memberdayakan pengembang untuk dengan mudah membuat editor teks kaya, membebaskan mereka dari seluk-beluk teknologi yang mendasarinya, manajemen gaya, dan kompleksitas terkait.

Mode Svelte5 dan rune diaktifkan! ?

Fitur Utama

Svelte 5 Siap : Dibangun dengan fitur terbaru Svelte 5 termasuk rune dan cuplikan
Kontrol yang Dapat Disesuaikan : Sistem kontrol fleksibel dengan opsi default dan kustom
Arsitektur Plugin : Dapat diperluas melalui ekstensi Tiptap
Responsif : Berfungsi dengan baik di desktop dan perangkat seluler
Menu Mengambang : Bilah alat mengambang yang sadar konteks untuk pengalaman pengeditan yang lebih baik
Manajemen Tautan : Penanganan tautan bawaan dengan kemampuan pratinjau dan pengeditan
Dukungan Tema : Penataan gaya yang mudah dengan variabel CSS dan kelas utilitas
Kinerja Dioptimalkan : Memanfaatkan reaktivitas Svelte untuk kelancaran pengeditan
Dukungan TypeScript : Dukungan TypeScript penuh untuk pengalaman pengembangan yang lebih baik

Instalasi

Instal paket dari NPM:

 npm instal "@friendofsvelte/tipex"

Penggunaan Dasar

Impor komponen dan gunakan di komponen Anda:

 <script lang="ts"> impor {Tipex} dari "@friendofsvelte/tipex";        let body = `<p><a target="_blank" rel="noopener noreferrer" href="">konten</a> ini ditulis oleh <a target="_blank" rel="noopener noreferrer" href=" http://bishwas.net/">Bishwas</a> pada tahun 2023.</p>`;</script>

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

Konsep Inti

Mode Kontrol

Tipex menawarkan dua mode kontrol:

Kontrol Default ( controls={true} ):

Toolbar pemformatan yang sudah dibuat sebelumnya
Dapat disesuaikan melalui prop utilities
Sempurna untuk implementasi cepat

Kontrol Khusus ( controls={false} ):

Kontrol penuh atas antarmuka editor
Gunakan controlComponent untuk implementasi khusus
Ideal untuk kasus penggunaan khusus

Sistem Ekstensi

Tipex memanfaatkan sistem ekstensi Tiptap untuk meningkatkan fungsionalitas:

 import { Tipex } dari "@friendofsvelte/tipex";import { TextAlign } dari '@tiptap/extension-text-align';const extensions = [TextAlign.configure({types: ['heading', 'paragraph'],} ),];// Gunakan dalam komponen<Tipex {extensions} />

Menu Mengambang

Menu mengambang menyediakan opsi pemformatan sadar konteks:

 <Tipex mengambang /> // Mengaktifkan menu mengambang

Penggunaan Tingkat Lanjut

Bagian Kepala dan Kaki Kustom

Tambahkan komponen khusus di atas atau di bawah editor menggunakan cuplikan Svelte 5:

 <script lang="ts"> impor {Tipex} dari "@friendofsvelte/tipex";        biarkan body = "";</script>

<Tipex {tubuh}>
    {#kepala cuplikan(editor)}
        <Header Khusus {editor} />
    {/potongan}

        {#cuplikan kaki(editor)}
        <CustomFooter {editor} />
    {/potongan}
</Tipex>

Utilitas Khusus

Tambahkan kontrol khusus sambil mempertahankan toolbar default:

 <script lang="ts"> impor {Tipex} dari "@friendofsvelte/tipex";        biarkan body = "";</script>

<Kontrol Tipex {tubuh}>
    {#utilitas cuplikan(editor)}
        <Format Khusus {editor} />
    {/potongan}
</Tipex>

Komponen Kontrol Kustom

Buat antarmuka kontrol yang sepenuhnya dapat disesuaikan:

 <script lang="ts"> impor {Tipex} dari "@friendofsvelte/tipex";        biarkan body = "";</script>

<Kontrol Tipex {body}={false}>
    {#cuplikan controlComponent(editor)}
        <KontrolKustom Saya {editor} />
    {/potongan}
</Tipex>

Dokumentasi

Untuk dokumentasi lengkap, kunjungi tipex.pages.dev.

Tentang Teman Langsing

Friend Of Svelte adalah proyek berbasis komunitas untuk membantu pengembang Svelte menemukan dan mengembangkan sumber daya Svelte yang mengagumkan. Misi kami adalah menciptakan alat berkualitas tinggi, mudah dipelihara, dan dapat diakses untuk ekosistem Svelte.