Laravel: Dodanie edytora WYSIWYG

5.8.x

0:01W tej lekcji pokażę ci w jaki sposób do naszej strony możemy dodać taki edytor Trumbowyg,

0:05czy jest edytor typu What you see is what you get i chciałbym go dodać

0:09w miejscach, gdzie dodajemy treść naszych wpisów czyli u

0:13nas to w Create i w Edit. Być może pamiętasz i dokładnie

0:17coś chcemy dodać i to nam pokaże jaki sposób możemy pracować z

0:21frontend'em i konkretnie JavaScript'em we frontend'ie. Jeżeli

0:25przejdziemy do get started, tutaj widzimy że można zainstalować ten Trumbowyg za

0:30pomocą npm install więc będę chciał zrobić. Ja to robię wewnątrz wirtualnej

0:34maszyny, możemy zrobić na zewnątrz tej maszyny, tak czy siak to się pojawi w

0:38tym katalogu. Natomiast w tej maszynie mamy zainstalowany npm i note

0:43więc możemy takie polecenie tutaj uruchomić. To nam się zainstaluję, a

0:47w międzyczasie będziemy mogli przygotować odpowiednie

0:53do tego widoki, okej ten plugin został zainstalowany i teraz

0:57jeszcze uruchomię sobie npm run watch, żeby śledziło zmiany

1:01w plikach i zaraz będziemy sobie mogli część tych plików

1:05utworzyć, chociaż może zanim to uruchomimy to będę chciał

1:09jeszcze dodać sobie webpack mix, śledzenie

1:13pliku JavaScript' owego który za sekundę sobie utworzymy, potem zrobimy dopiero watch

1:17żeby to wszystko było odpowiednio śledzonem a zatem c hciałbym tutaj dodać sobie

1:21coś takiego czyli resource js main. Chcemy ten plik śledzić,

1:25kompilować i będzie on ustawiony do public js. Zatem przejdźmy

1:30sobie do resources i utworzymy tutaj po prostu katalog js,

1:34znowu tak jak ci już wspominałem wielokrotnie ty tutaj rządzisz w tym katalogu, możesz

1:39dowolną strukturę tworzyć, main.js  i ten plik

1:43już będzie odpowiednio wyłapywane. Okej przejdźmy do konsoli,

1:47tutaj sobie uruchomimy npm run watch. Powiem ci tylko mojego doświadczenia, że

1:52uruchamianie tego polecenia wewnątrz tej wirtualnej maszyny jest zazwyczaj sporo

1:56wolniejsze niż bym to uruchomił w terminalu u siebie po prostu na Mac'u

2:00więc to jest moim zdaniem dobre wyłącznie wtedy jeżeli

2:04swoim systemie nie chcesz w ogóle instalować node npm. Nic z tych rzeczy, chcę

2:08żeby to było zainstalowane tylko wewnątrz wirtualnej maszyny, ale skoro już tu jestem

2:12uruchomię sobie to i poczekamy chwilę. Okej, udało się i teraz kolejny

2:17plik tutaj będzie generowany, będzie to dokładnie main.js.

2:21Dlatego warto byłoby ten plik sobie również podlinkować, podobnie jak

2:25tutaj u góry za pomocą mixa to robiliśmy to teraz gdzieś na

2:29dole podlinkujemy sobie skrypt i znowu mix.

2:35Jeżeli nie jesteś pewny jaką

2:39ścieżkę tutaj wpisać, to wystarczy podejrzeć sobie ten plik. Będzie to

2:43wyglądać dokładnie tak, okej on już na naszą stronę

2:47będzie wstawiany i teraz pozostało nam uzupełnić

2:52te pliki w taki sposób, aby wszystko poprawnie i teraz ja w tej

2:56lekcji nie chce się skupiać dokładnie tym jak zintegrować ten edytor

3:00What you see is what you get, bo każdy edytor jest specyficzny i do każdego

3:05trzeba przeczytać dokumentację. Bardziej chciałem ci pokazać na praktycznym przykładzie

3:09w jaki sposób tutaj można z JavaScriptem pracować, czyli generalnie z frontend'em

3:13w laravel, jedno natomiast co będę chciał tutaj zrobić

3:17w resources w js,

3:21to utworzyć sobie katalog components i w nim plik editor js

3:26czyli tam moglibyśmy mieć więcej, więcej

3:31takich komponentów i tam plik będę chciał zaimportować tutaj, webpack

3:35mix działa tak że działają w nim importy z ES6, czyli

3:40możemy napisać import i podać tutaj plik components

3:44i następnie editor można również z require,

3:48czyli tego co znamy na przykład node js jeżeli kiedykolwiek z tym pracowałeś,

3:52to sprawi że skoro my ten plik main nasłuchujemy to on zaimportuje

3:56cały ten plik, który jest tutaj, a w nim skonfigurujemy sobie wspomniany wcześniej edytor. Ja

4:02pozwolę sobie wkleić gotowy kod i wytłumaczę ci na szybko co się nim dzieje. Po

4:07pierwsze chce do window przypisać jquery, które tutaj importuje za pomocą właśnie

4:11require, to jest potrzebne po to że w momencie kiedy zaimportujemy zainstalowany

4:16przed momentem moduł npm trumbowyg to on oczekuje że globalnie

4:20będzie dostępne jquery, dlatego właśnie robimy to tak. Jeżeli chodzi o ikonki,

4:24a tutaj musimy je również zaimportować, podać do nich ścieżkę. Jeżeli

4:28tego nie zrobisz to nie wyświetlą nam się icon.svg i to szczerze

4:32mówiąc znalazłem na Stack overflow dlatego pokazuje ci to tylko po

4:37to żeby powiedzieć że z każdym edytorem się pracuje indywidualnie

4:41i nie sensu tutaj tłumaczyć dokładnie wszystkiego co tutaj zrobiłem

4:45i na końcu w jquery wyszukujemy wszystkich elementów które

4:49mają taki identyfikator za moment to będziemy dodawać i na nich wywołujemy

4:54plugin trumbowyg, czyli tak to wygląda, ale ważne że jeszcze musimy

4:58sobie style zaimportować i tutaj mamy javascript, a tutaj mamy

5:02sass, więc jeżeli w sass przejdziemy do components, chciałbym tutaj szybko utworzyć sobie

5:06plik vendors scss i w nim zrobimy taki

5:10oto import, czyli zaimportuje plik CSS'owy właśnie z node modules,

5:15czyli zainstalowanego modułu i tenże vendors teraz podlinkujemy sobie jeszcze

5:19tutaj w głównym pliku main. Pamiętaj, że na ten

5:23plik nasłuchujemy, to jest ważne, żeby to tutaj dodać, okej. Każda

5:29ta zmiana kiedy coś zapisuje sprawia, że tutaj jest to wyłapywane i nasza

5:34strona również powinna być automatycznie odświeżana i teraz

5:39w zasadzie ostatnie co powinniśmy zrobić to przejść do create i w

5:44miejscu gdzie mieliśmy textarea dodać jej klasę What

5:50you see is what you get i dokładnie taką samą dodamy

5:54w edit. Teraz

6:02jeżeli przejdziemy do edycji zobaczmy czy taki edytor się wpisuje, czy

6:06tutaj wstawia, tak i to są te wspomniane ikonki svg do których pewną

6:10sztuczkę należało zastosować. Jeszcze jedna rzecz którą możemy zrobić to

6:14zmienić klasę na is-full zarówno w create jak i w edit. Będziemy

6:18tam mieli troszeczkę więcej miejsca na ten edytor, automatycznie to zostało odświeżone i

6:22jak widzisz takie edytor tutaj się pojawił. Teraz jeżeli na przykład będziemy chcieli

6:26pogrubić to jak najbardziej to się nie pogrubia. Robimy update i

6:31jeżeli teraz przejdziemy sobie do takiego postu to możesz zobaczyć że

6:35to pogrubienie jak najbardziej się tutaj pojawiło. Jak zatem widzisz praca

6:39z webpack mix może być bardzo prosta i przyjemna. Niemniej

6:43jednak nic się tutaj nie ogranicza, możesz stworzyć dowolny workflow lub możesz

6:47nie mieć workflow frontend'owego. To od ciebie zależy, w jaki sposób chcesz pracować.