Monipuoliset tekstieditorit: Tiptap
Integroikaa Tiptap ProseMirror -editori SvelteKit-lomakkeeseen Svelte-wrapperin avulla.
Monipuoliset tekstieditorit: Tiptap on ilmainen Sveltejs Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Sveltejs Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.
Tiptap
Tiptap on suosittu ProseMirror-pohjainen editori, jossa on helppokäyttöinen laajennusjärjestelmä.
Asennus
Lisää core ja starter kit.
npm install @tiptap/core @tiptap/starter-kitAlustaminen
Luo Editor onMount-funktion sisällä ja kohdista se div-elementtiin.
const editor = new Editor({ element: el, extensions: [StarterKit] });Sido DOMiin
Käytä bind:this-sidontaa elementtiviitteen hakemiseen.
<div bind:this={el} class="editor" />Siivous
Kutsu editor.destroy()-toimintoa onDestroy-funktiossa resurssien vapauttamiseksi.
Kaksisuuntainen sidonta
Tilaa editorin update-tapahtumaa synkronoidaksesi sisällön Svelte-storeen.
editor.on("update", ({ editor }) => content = editor.getHTML());Työkalupalkki
Rakenna työkalupalkki painikkeilla, jotka kutsuvat esimerkiksi editor.chain().focus().toggleBold().run()-toimintoa.
Reaktiiviset aktiivisuustilat
Tilaa editorin päivityksiä korostaaksesi aktiiviset painikkeet.
Laajennukset
Lisää kuvat, maininnat, taulukot ja koodilohkot Tiptap-laajennuksilla.
Skeeman mukauttaminen
Määritä oma skeemasi toimialakohtaisia muokkauskokemuksia varten.
SvelteKit-kääre
Kääri editori komponenttiin, jolla on content-prop ja lähetetyt päivitykset.
Mobiili
Testaa kosketuslaitteilla. ProseMirror käsittelee valinnan hyvin eri alustoilla.
Pikatarkistus
Mitä editor.destroy() tekee?
Kertaus
Kääri Tiptap komponenttiin bind:this-sidonnan ja elinkaarikoukkujen avulla. Rakenna työkalupalkit editorin komennoilla.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Monipuoliset tekstieditorit: Tiptap” ilmainen?
Kyllä – oppitunnin ”Monipuoliset tekstieditorit: Tiptap” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Sveltejs Academy-kurssin, päivitä CoddyKit PROhon. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Monipuoliset tekstieditorit: Tiptap”?
Integroikaa Tiptap ProseMirror -editori SvelteKit-lomakkeeseen Svelte-wrapperin avulla. Harjoittelet Sveltejs Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Sveltejs Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Sveltejs Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Monipuoliset tekstieditorit: Tiptap”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Sveltejs Academy-oppitunnilla?
Kyllä. Jokainen Sveltejs Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Tailwind CSS:n käyttö SvelteKitin kanssa
- D3.js-kaaviot Sveltessä
- Leaflet-kartat Svelte-actioneilla
- Monipuoliset tekstieditorit: Tiptap