0Pricing
Sveltejs Academy · บทเรียน

เครื่องมือแก้ไข Rich Text: Tiptap

ผสานเครื่องมือแก้ไข Tiptap ProseMirror เข้ากับแบบฟอร์ม SvelteKit ด้วยตัวห่อหุ้ม Svelte

เครื่องมือแก้ไข Rich Text: Tiptap เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน

Tiptap

Tiptap เป็นตัวแก้ไขที่ได้รับความนิยมซึ่งสร้างบน ProseMirror และมีระบบส่วนขยายที่ใช้งานง่าย

การติดตั้ง

เพิ่มแกนหลักและชุดเริ่มต้น

npm install @tiptap/core @tiptap/starter-kit

การเริ่มต้น

สร้างตัวแก้ไขใน onMount โดยกำหนดเป้าหมายเป็น div

const editor = new Editor({ element: el, extensions: [StarterKit] });

ผูกกับ DOM

ใช้ bind:this เพื่อรับการอ้างอิงองค์ประกอบ

<div bind:this={el} class="editor" />

การล้างข้อมูล

เรียก editor.destroy() ใน onDestroy เพื่อคืนทรัพยากร

การผูกสองทาง

สมัครรับเหตุการณ์การอัปเดตของตัวแก้ไข เพื่อซิงค์เนื้อหาไปยังสโตร์ของ Svelte

editor.on("update", ({ editor }) => content = editor.getHTML());

แถบเครื่องมือ

สร้างแถบเครื่องมือด้วยปุ่มที่เรียก editor.chain().focus().toggleBold().run() และคำสั่งอื่น ๆ

สถานะทำงานแบบตอบสนอง

สมัครรับการอัปเดตของตัวแก้ไขเพื่อเน้นปุ่มที่กำลังทำงาน

ส่วนขยาย

เพิ่มรูปภาพ การกล่าวถึง ตาราง และบล็อกโค้ดผ่านส่วนขยายของ Tiptap

การปรับแต่งแบบแผน

กำหนดแบบแผนของคุณเองสำหรับประสบการณ์การแก้ไขเฉพาะโดเมน

ตัวห่อหุ้ม SvelteKit

ห่อตัวแก้ไขไว้ในองค์ประกอบที่มีพร็อพ content และการอัปเดตที่ส่งออก

อุปกรณ์เคลื่อนที่

ทดสอบบนอุปกรณ์สัมผัส เนื่องจาก ProseMirror จัดการการเลือกได้ดีบนแพลตฟอร์มต่าง ๆ

ตรวจสอบอย่างรวดเร็ว

editor.destroy() ทำหน้าที่อะไร

สรุปทบทวน

ห่อหุ้ม Tiptap ไว้ในองค์ประกอบด้วย bind:this และฮุกวงจรการทำงาน สร้างแถบเครื่องมือผ่านคำสั่งของตัวแก้ไข

คำถามที่พบบ่อย

บทเรียน “เครื่องมือแก้ไข Rich Text: Tiptap” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เครื่องมือแก้ไข Rich Text: Tiptap” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เครื่องมือแก้ไข Rich Text: Tiptap”

ผสานเครื่องมือแก้ไข Tiptap ProseMirror เข้ากับแบบฟอร์ม SvelteKit ด้วยตัวห่อหุ้ม Svelte คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “เครื่องมือแก้ไข Rich Text: Tiptap” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม

ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การใช้ Tailwind CSS ร่วมกับ SvelteKit
  2. แผนภูมิ D3.js ใน Svelte
  3. แผนที่ Leaflet ด้วยแอ็กชัน Svelte
  4. เครื่องมือแก้ไข Rich Text: Tiptap
← กลับไปที่ Sveltejs Academy