ดาวน์โหลด tipex - ดาวน์โหลดซอร์สโค้ด tipex

tipex

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

ทิเพ็กซ์

Tipex ย่อมาจากตัวแก้ไข Rich Text ขั้นสูงที่ปรับแต่งสำหรับ Svelte ออกแบบอย่างพิถีพิถันด้วยเฟรมเวิร์กที่แข็งแกร่ง Tiptap และ Prosemirror ช่วยให้นักพัฒนาสามารถสร้าง Rich Text Editor ได้อย่างง่ายดาย โดยปลดปล่อยพวกเขาจากความซับซ้อนของเทคโนโลยีพื้นฐาน การจัดการสไตล์ และความซับซ้อนที่เกี่ยวข้อง

เปิดใช้งานโหมด Svelte5 และ runes แล้ว! -

คุณสมบัติที่สำคัญ

พร้อมสำหรับ Svelte 5 : สร้างด้วยคุณสมบัติล่าสุดของ Svelte 5 รวมถึงรูนและตัวอย่างข้อมูล
การควบคุมที่ปรับแต่งได้ : ระบบควบคุมที่ยืดหยุ่นพร้อมทั้งตัวเลือกเริ่มต้นและแบบกำหนดเอง
สถาปัตยกรรมปลั๊กอิน : ขยายได้ผ่านส่วนขยาย Tiptap
ตอบสนอง : ใช้งานได้ดีทั้งบนเดสก์ท็อปและอุปกรณ์มือถือ
เมนูแบบลอย : แถบเครื่องมือแบบลอยตามบริบทเพื่อประสบการณ์การแก้ไขที่ดียิ่งขึ้น
การจัดการลิงก์ : การจัดการลิงก์ในตัวพร้อมความสามารถในการดูตัวอย่างและแก้ไข
การสนับสนุนธีม : จัดแต่งทรงผมได้ง่ายด้วยตัวแปร CSS และคลาสยูทิลิตี้
เพิ่มประสิทธิภาพการทำงาน : ใช้ประโยชน์จากปฏิกิริยาของ Svelte เพื่อการแก้ไขที่ราบรื่น
การสนับสนุน TypeScript : การสนับสนุน TypeScript เต็มรูปแบบเพื่อประสบการณ์การพัฒนาที่ดีขึ้น

การติดตั้ง

ติดตั้งแพ็คเกจจาก NPM:

 npm ติดตั้ง "@friendofsvelte/tipex"

การใช้งานขั้นพื้นฐาน

นำเข้าส่วนประกอบและใช้ในส่วนประกอบของคุณ:

 <script lang="ts"> นำเข้า {Tipex} จาก "@friendofsvelte/tipex";        la body = `<p><a target="_blank" rel="noopener noreferrer" href="">เนื้อหา</a>นี้เขียนโดย <a target="_blank" rel="noopener noreferrer" href=" http://bishwas.net/">บิสวาส</a> ในปี 2023</p>`;</script>

<ทิเพ็กซ์
     {body} ควบคุม Floatingstyle="margin-top: 1rem; margin-bottom: 0;"class="h-[70vh] border border-neutral-200"/>

แนวคิดหลัก

โหมดการควบคุม

Tipex มีโหมดการควบคุมสองโหมด:

การควบคุมเริ่มต้น ( controls={true} ):

แถบเครื่องมือการจัดรูปแบบที่สร้างไว้ล่วงหน้า
ปรับแต่งได้ผ่านเสา utilities
เหมาะสำหรับนำไปปฏิบัติอย่างรวดเร็ว

การควบคุมแบบกำหนดเอง ( controls={false} ):

ควบคุมอินเทอร์เฟซตัวแก้ไขได้อย่างสมบูรณ์
ใช้ controlComponent สำหรับการใช้งานแบบกำหนดเอง
เหมาะสำหรับกรณีการใช้งานเฉพาะทาง

ระบบขยาย

Tipex ใช้ประโยชน์จากระบบส่วนขยายของ Tiptap เพื่อการทำงานที่ได้รับการปรับปรุง:

 นำเข้า { Tipex } จาก "@friendofsvelte/tipex";นำเข้า { TextAlign } จาก '@tiptap/extension-text-align';const extensions = [TextAlign.configure({types: ['heading', 'paragraph'],} ),];// ใช้ในส่วนประกอบ <Tipex {extensions} />

เมนูลอยน้ำ

เมนูแบบลอยมีตัวเลือกการจัดรูปแบบตามบริบท:

 <Tipex ลอย /> // เปิดใช้งานเมนูลอย

การใช้งานขั้นสูง

ส่วนหัวและส่วนเท้าแบบกำหนดเอง

เพิ่มส่วนประกอบที่กำหนดเองด้านบนหรือด้านล่างของตัวแก้ไขโดยใช้ตัวอย่าง Svelte 5:

 <script lang="ts"> นำเข้า {Tipex} จาก "@friendofsvelte/tipex";        ให้ body = "";</script>

<ทิเพ็กซ์ {body}>
    {#ตัวอย่างส่วนหัว(ตัวแก้ไข)}
        <CustomHeader {ตัวแก้ไข} />
    {/ตัวอย่าง}

        {#ตัวอย่างข้อมูลเท้า(บรรณาธิการ)}
        <CustomFooter {ตัวแก้ไข} />
    {/ตัวอย่าง}
</ทิเพ็กซ์>

ยูทิลิตี้ที่กำหนดเอง

เพิ่มการควบคุมแบบกำหนดเองในขณะที่ยังคงแถบเครื่องมือเริ่มต้นไว้:

 <script lang="ts"> นำเข้า {Tipex} จาก "@friendofsvelte/tipex";        ให้ body = "";</script>

<การควบคุม Tipex {body}>
    {#ยูทิลิตี้ตัวอย่าง (ตัวแก้ไข)}
        <การจัดรูปแบบแบบกำหนดเอง {ตัวแก้ไข} />
    {/ตัวอย่าง}
</ทิเพ็กซ์>

องค์ประกอบการควบคุมแบบกำหนดเอง

สร้างอินเทอร์เฟซการควบคุมแบบกำหนดเองโดยสมบูรณ์:

 <script lang="ts"> นำเข้า {Tipex} จาก "@friendofsvelte/tipex";        ให้ body = "";</script>

<Tipex {body} ควบคุม={false}>
    {#ส่วนควบคุมตัวอย่างข้อมูล (ตัวแก้ไข)}
        <MyCustomControls {ตัวแก้ไข} />
    {/ตัวอย่าง}
</ทิเพ็กซ์>

เอกสารประกอบ

สำหรับเอกสารประกอบที่ครอบคลุม โปรดไปที่ tipex.pages.dev

เกี่ยวกับ เพื่อน สเวลท์

Friend Of Svelte เป็นโครงการที่ขับเคลื่อนโดยชุมชนเพื่อช่วยนักพัฒนา Svelte ค้นหาและพัฒนาทรัพยากร Svelte ที่ยอดเยี่ยม ภารกิจของเราคือการสร้างเครื่องมือคุณภาพสูง บำรุงรักษาได้ และเข้าถึงได้สำหรับระบบนิเวศของ Svelte