Live demo
Probeer Laravel Filemanager in de Flux Pro-editor
Deze editor en de filemanager erachter zijn alleen van jou. Verander wat je wilt, sla het op en kom later terug: het staat er nog. Elke nacht om 03:00 (tijdzone Europe/Amsterdam) gaat alles terug naar het voorbeeld.
Inhoud
Toont de inhoud zoals de server die het laatst ontving. Klik op Opslaan om hem bij te werken.
Welkom in je sandbox
Dit is voorbeeldinhoud, en die is helemaal van jou. Verander hem, sla hem op, en hij blijft staan tot de reset van vannacht. Niemand anders ziet wat je hier doet.
Afbeeldingen schalen en uitlijnen
Klik op de foto hierboven: er opent een menu met 25%, 50%, 75% en 100%, een veld voor een eigen breedte, en knoppen om de afbeelding links, in het midden of rechts uit te lijnen. Dubbelklik erop om de alt-tekst, de titel, extra classes en stijlen te bewerken.
Afbeeldingen kiezen uit de filemanager
De afbeeldingknop in de werkbalk opent Laravel Filemanager in een pop-up, met een eigen map. Daar staan een paar demofoto’s in; upload je eigen foto’s, snijd ze bij of schaal ze, en kies er één of meer om ze hier in te voegen.
Naar een bestand linken
De paperclipknop opent de filemanager voor documenten. Kies een bestand, schrijf de linktekst, en er verschijnt een link zoals deze: download het overzicht (pdf). Klik op een link om hem te bewerken.
Slepen, neerzetten en plakken
Sleep een afbeelding vanaf je bureaublad op de editor, of plak een schermafbeelding. Op deze site wordt hij geüpload naar je map in de filemanager; standaard sluit de package hem in als base64.
Alles wat je ziet is gewone HTML met een paar classes en inline stijlen. Open het HTML-tabblad onder de editor om precies te zien wat er wordt opgeslagen.
In je eigen Livewire-formulier is het één regel: <x-flux-filemanager-editor wire:model="content" />
Toont de inhoud zoals de server die het laatst ontving. Klik op Opslaan om hem bij te werken.
<h2>Welkom in je sandbox</h2>
<p>Dit is voorbeeldinhoud, en die is helemaal van jou. Verander hem, sla hem op, en hij blijft staan tot de reset van vannacht. Niemand anders ziet wat je hier doet.</p>
<p><img src="/demo-assets/images/fjord-viewpoint.jpg" alt="Wandelaars op een rots hoog boven een diepblauw fjord" width="100%" data-align="center" class="tiptap-image align-center" style="width: 100%; margin-left: auto; margin-right: auto; display: block;"></p>
<h3>Afbeeldingen schalen en uitlijnen</h3>
<p>Klik op de foto hierboven: er opent een menu met 25%, 50%, 75% en 100%, een veld voor een eigen breedte, en knoppen om de afbeelding links, in het midden of rechts uit te lijnen. Dubbelklik erop om de alt-tekst, de titel, extra classes en stijlen te bewerken.</p>
<p><img src="/demo-assets/images/desk-with-sketchbook.jpg" alt="Een laptop, een schetsboek en een camera op een houten bureau" width="50%" data-align="right" class="tiptap-image align-right" style="width: 50%; margin-left: auto; margin-right: 0;"></p>
<h3>Afbeeldingen kiezen uit de filemanager</h3>
<p>De afbeeldingknop in de werkbalk opent Laravel Filemanager in een pop-up, met een eigen map. Daar staan een paar demofoto’s in; upload je eigen foto’s, snijd ze bij of schaal ze, en kies er één of meer om ze hier in te voegen.</p>
<h3>Naar een bestand linken</h3>
<p>De paperclipknop opent de filemanager voor documenten. Kies een bestand, schrijf de linktekst, en er verschijnt een link zoals deze: <a target="_blank" rel="noopener noreferrer nofollow" href="/demo-assets/files/feature-sheet.pdf">download het overzicht (pdf)</a>. Klik op een link om hem te bewerken.</p>
<h3>Slepen, neerzetten en plakken</h3>
<p>Sleep een afbeelding vanaf je bureaublad op de editor, of plak een schermafbeelding. Op deze site wordt hij geüpload naar je map in de filemanager; standaard sluit de package hem in als base64.</p>
<blockquote><p>Alles wat je ziet is gewone HTML met een paar classes en inline stijlen. Open het HTML-tabblad onder de editor om precies te zien wat er wordt opgeslagen.</p></blockquote>
<p>In je eigen Livewire-formulier is het één regel: <code><x-flux-filemanager-editor wire:model="content" /></code></p>