Média

Képek

Kép beszúrása URL-ből:

<script setup lang="ts">
const onEditorReady = (options) => {
  // Insert an image programmatically
  options.editor.commands.setImage({ src: 'https://picsum.photos/600/300' })
}
</script>

<template>
  <Tiptapify
    :items="['bold', 'italic', '|', 'image', '|', 'undo', 'redo']"
    @editor-ready="onEditorReady"
  />
</template>

A képgomb megnyitja a képpárbeszédablakot:

• URL alapján vagy Feltöltés. Feltöltési végpont nélkül a kiválasztott fájl base64 data URL-ként ágyazódik be; végponttal a fájl a szerveredre kerül.
• Helyettesítő szöveg (a párbeszédablak figyelmeztet, ha üres) és képaláírás a kép alatt.
• Méret: eredeti, szövegszélesség, vagy egyéni szélesség × magasság arányzárral.
• Elhelyezés: külön sorban középen, vagy a szövegtől balra vagy jobbra lebegve.

A kijelölt képnek átméretező fogantyúi vannak (minden átméretezés egy visszavonási lépés), és felette egy eszköztár: balra vagy jobbra lebegtetés, letöltés, szerkesztés, törlés. A dupla kattintás megnyitja a párbeszédablakot.

Videók

YouTube- és Vimeo-videók vagy videófájl beágyazása:

<template>
  <Tiptapify
    :items="['bold', 'italic', '|', 'video', '|', 'undo', 'redo']"
    placeholder="Paste a YouTube URL to embed a video..."
  />
</template>

A videógomb megnyitja a videópárbeszédablakot:

• YouTube- vagy Vimeo-hivatkozásból azok lejátszója lesz; a párbeszédablak megmutatja a felismert szolgáltatót és egy előnézetet, valamint a Kezdés mezőt (a ?t= alapján előtöltve), ahol a lejátszó támogatja.
• Videófájlra mutató hivatkozásból (.mp4, .m4v, .webm, .ogv, .ogg, .mov) <video> lesz borítóképpel, vezérlőkkel, automatikus (némított) lejátszással és ismétléssel. A hivatkozásnak tartalmaznia kell a protokollt (https://, http://), //host vagy /path formát: a párbeszédablak soha nem találgat.
• A Feltöltés videófájlt küld a szerveredre; csak feltöltési végponttal jelenik meg.
• Méret: reszponzív 16:9, vagy egyéni szélesség × magasság arányzárral.

A szövegbe illesztett YouTube URL is beágyazódik. A lejátszóra kattintva az kijelölődik a lejátszás helyett, így az eszköztárgomb megjelenik; a dupla kattintás megnyitja a párbeszédablakot.

Iframe-ek

Ágyazz be egy oldalt a címe alapján vagy a Megosztás vagy Beágyazás menüből származó iframe-kóddal:

<template>
  <Tiptapify
    :items="['bold', 'italic', '|', 'iframe', '|', 'undo', 'redo']"
    placeholder="Enter a URL to embed as iframe..."
  />
</template>

Az iframe-párbeszédablak beolvassa a beillesztett kódot (cím, méret, név, engedélyek, sandbox, késleltetett betöltés, teljes képernyő), és jelzi, mit vett át belőle; a szkriptet vagy más címkéket tartalmazó kódot elutasítja. Előnézetet mutat, és van benne cím képernyőolvasóknak, méret (reszponzív a kód arányaival, vagy egyéni arányzárral), valamint a Speciális alatt a név, az allow, a sandbox, a késleltetett betöltés és a szegély. A címnek https:// vagy http:// előtag kell. A beágyazásra kattintva duplán megnyílik a párbeszédablak.

Táblázatok

Táblázatok beszúrása és szerkesztése:

<template>
  <Tiptapify
    :items="['bold', 'italic', '|', 'table', '|', 'undo', 'redo']"
    placeholder="Use the table button to insert a table..."
  />
</template>

A táblázat beszúrása után a következőket teheted:

• Sorok és oszlopok hozzáadása/eltávolítása
• Cellák kijelölése
• A teljes táblázat törlése

Hivatkozások

Hivatkozások beszúrása:

<template>
  <Tiptapify
    :items="['bold', 'italic', '|', 'link', '|', 'undo', 'redo']"
    placeholder="Select text and click link to add a hyperlink..."
  />
</template>

A hivatkozás-párbeszédablak a címet úgy veszi át, ahogy begépelték: https://…, bármilyen más séma (ftp://, ssh://, belső séma), mailto:, tel:, #anchor vagy /page. Soha nem ad hozzá magától protokollt: a protokoll nélküli címhez (example.com, internal.host:8080) chipek jelennek meg a https://, http:// vagy ftp:// hozzáadására, és ha egyiket sem adod hozzá, a cím úgy marad, ahogy begépelted. A javascript:, vbscript: és data: címeket elutasítja.

A párbeszédablakban ott van még a hivatkozás szövege, a Megnyitás új lapon (amely hozzáadja a noopener noreferrer értéket), valamint a Speciális alatt a rel értékek chipként (bármilyen érték: Enter, szóköz vagy vessző hozzáadja) és egy CSS-osztály.

A linkPreview proppal ugyanez a párbeszédablak a hivatkozást kártyaként mutatja az oldal képével, címével és leírásával, az üres sorba illesztett URL pedig a Hivatkozás / Kártya választást kínálja — lásd a hivatkozáskártyákat.

Emoji

Emoji beszúrása a beépített, 10 kategóriás választóból:

<template>
  <Tiptapify
    :items="['bold', 'italic', '|', 'emoji', '|', 'undo', 'redo']"
    placeholder="Click the emoji button to insert an emoji..."
  />
</template>

Az emojiválasztó keresőmezőt is tartalmaz, amellyel gyorsan megtalálhatod a kívánt emojit.

Speciális karakterek (Charmap)

Speciális karakterek, nyilak, görög betűk, matematikai szimbólumok és más jelek beszúrása:

<template>
  <Tiptapify
    :items="['bold', 'italic', '|', 'charmap', '|', 'undo', 'redo']"
    placeholder="Click charmap to insert special characters..."
  />
</template>

A kategóriák:

• Nyilak
• Pénznemek
• Görög betűk
• Matematikai szimbólumok
• Egyéb

Médiaeszközök kombinálása

Teljes funkcionalitású médiaeszköztár:

<template>
  <Tiptapify
    :items="[
      'bold', 'italic', 'underline',
      '|',
      'link', 'image', 'video', 'iframe',
      '|',
      'emoji', 'charmap', 'table',
      '|',
      'undo', 'redo'
    ]"
    placeholder="Full media toolbar..."
  />
</template>