Brug i Rich Text Editoren

Brug i Rich Text Editoren

Pluginnet tilføjer en Tiptap-udvidelse og en knap til værktøjslinjen i Rich Text Editoren. Brugerfladen er på dansk og engelsk og følger backoffice-brugerens sprog.

1. Aktivér knappen på datatypen

1. Gå til Settings → Data Types og åbn den Rich Text Editor-datatype, I bruger (fx Richtext editor).
2. Under Capabilities/Extensions slås Septima Widget (Septima.Tiptap.Widget) til. Den ligger i gruppen Media.
3. Under Toolbar trækkes knappen Septima Widget (Septima.Tiptap.Toolbar.Widget) ind i værktøjslinjen.
4. Gem datatypen.

2. Indsæt en widget

1. Placér markøren i teksten, hvor kortet skal stå.
2. Klik på Septima Widget-knappen i værktøjslinjen.
3. I dialogen kan du enten
   • skrive Widget-ID på en eksisterende widget, fx kommunekort. ID'et må højst være 100 tegn, skal starte med et bogstav eller tal og må kun indeholde bogstaverne a–z/A–Z (ikke æ, ø, å), tal, punktum, bindestreg og understreg – eller
   • klikke Opret ny widget (evt. med en titel). Pluginnet genererer et ID, fx umbraco-k3x9q2, udfylder feltet og åbner Widget Admin i en ny fane. Konfigurér og publicér widgetten dér.
4. Justér evt. Højde (CSS-højde, fx 400px eller 60vh).
5. Dialogen viser en forhåndsvisning af widgetten. Klik Genindlæs forhåndsvisning (↻), når du har gemt i Widget Admin. Se Forhåndsvisning i backoffice.
6. Klik Indsæt. Widgetten vises som en blok i teksten – ligesom et billede.
7. Gem og udgiv siden.

Forhåndsvisning i backoffice

Forhåndsvisningen findes i dialogen, i widget-blokken i Rich Text Editoren og i property editoren. Den vises i en isoleret iframe, så widget-scriptet ikke påvirker backoffice. Konfigurationen hentes altid uden cache (?t=<tidsstempel> og cache: 'no-store') og gives direkte til WidgetAPI, så browserens og CDN'ets cache ikke viser en gammel version.

• Med PreviewBaseUrl læses den senest gemte version direkte fra Widget Admin. Ét klik på ↻ efter du har gemt er nok. Det kræver, at browseren kan hente WidgetScriptUrl, og at det er Septimas widget.js-loader (som importerer widgetapi.mjs). Ellers bruges den publicerede version fra ConfigBaseUrl som beskrevet nedenfor. Scriptet indlæses i forhåndsvisningen i begge tilfælde, så kan WidgetScriptUrl slet ikke hentes, forbliver forhåndsvisningen tom.
• Uden PreviewBaseUrl (eller hvis adressen ikke svarer med JSON) læses den publicerede version fra ConfigBaseUrl. Widget Admin er typisk ca. 10 sekunder om at publicere efter du har gemt, så ↻ spørger igen hvert 2,5 sekund i op til 2 minutter, indtil der er en ny version. Imens vises Venter på at Widget Admin publicerer… og en Stop-knap.

Hjemmesiden bruger altid den publicerede version (data-widget-url med ConfigBaseUrl) med normal cache.

3. Redigér en widget

Markér widget-blokken og klik på Septima Widget i værktøjslinjen – eller dobbeltklik på blokken. Dialogen åbner med Widget-ID og højde udfyldt. Her kan du

• skifte til et andet Widget-ID eller ændre højden,
• klikke Åbn i Widget Admin for at redigere kortet (lag, udsnit, kontroller osv.). Widget Admin åbner i en ny fane.

Ændringer i Widget Admin slår igennem på hjemmesiden, så snart Widget Admin har publiceret konfigurationen. Siden i Umbraco skal ikke genudgives, fordi den kun indeholder en henvisning (URL) til konfigurationen. Kun ændring af ID eller højde kræver genudgivelse.

Vigtigt: Widgets i Rich Text Editoren gemmer den fulde URL (data-widget-url). Ændres ConfigBaseUrl, henter eksisterende widgets derfor stadig fra den gamle adresse. Genindlæs backoffice i browseren (den husker konfigurationen, så længe siden er åben), åbn derefter hver berørt widget, klik Opdater, og genudgiv siden – så bygges URL'en med den nye ConfigBaseUrl. Widgets i en egenskab gemmer kun navnet og følger automatisk den nye adresse.

4. Fjern en widget

Markér widget-blokken og tryk Delete eller Backspace. Konfigurationen i Widget Admin slettes ikke – den kan genbruges på andre sider.

Skærmbilleder

Knappen Septima Widget i værktøjslinjen og en indsat widget i teksten:

Dialogen til at indsætte eller redigere en widget: