Jak zainstalować i używać edytora TinyMCE w Laravel?

Ostatnia aktualizacja paź 18, 2021

Zadowolony

Zainstaluj i używaj edytora TinyMCE w Laravel

W przeszłości publikowałem artykuł Jak używać CKEditor w Laravelu. W związku z tym artykułem wielu czytelników prosiło o napisanie posta o tym, jak korzystać z edytora TinyMCE w Laravelu. TinyMCE jest również jednym z popularnych edytorów HTML typu WYSIWYG, takich jak CKEditor. W tym artykule dowiemy się, jak zainstalować i używać edytora TinyMCE w aplikacji Laravel.

Pracując w sieci, czasami musimy przechowywać w bazie danych długie treści, obrazy i fragmenty rozszerzone. Ta treść może być biografią, podsumowaniem produktu, treścią strony itp. Wszystkie te formaty wymagają użycia różnych znaczników HTML. Znacznik textarea w HTML nie jest przyjazny dla użytkownika, jeśli chodzi o pisanie treści zawierających elementy HTML. W tym miejscu powinieneś używać internetowych edytorów tekstu.

TinyMCE i CKEditor to popularne edytory. Od Ciebie zależy, czy wybierzesz jeden z nich. Oba edytory WYSIWYG (otrzymujesz to, co widzisz) są lekkie i doskonale sprawdzają się w aplikacjach internetowych.

Edytor TinyMCE jest darmowy z ograniczonymi narzędziami. Jeśli chcesz korzystać z ich wtyczek premium, sprawdź ich stronę z cenami.

Zainstaluj i używaj edytora TinyMCE w Laravel

Aby zintegrować edytor TinyMCE z Laravel, użyję pakietu npm dla TinyMCE. Laravel zapewnia wbudowaną obsługę npm. Wszystko, czego potrzebujesz, aby upewnić się, że Node.js jest zainstalowany w Twoim systemie. Otwórz terminal w katalogu głównym projektu i uruchom polecenie, aby najpierw zainstalować zależności npm.

npm install

Następnie zainstaluj TinyMCE za pomocą npm poleceniem:

npm i tinymce

Po zakończeniu, jeśli przejdziesz do katalogu „node_modules/tinymce", zobaczysz kilka plików i folderów. Niektóre z nich musimy skopiować i umieścić w katalogu ‘public’. Aby to zrobić, otwórz webpack.mix.jsplik i dodaj do niego poniższy kod.

webpack.mix.js

....
....
mix.copyDirectory('node_modules/tinymce/icons', 'public/node_modules/tinymce/icons');
mix.copyDirectory('node_modules/tinymce/plugins', 'public/node_modules/tinymce/plugins');
mix.copyDirectory('node_modules/tinymce/skins', 'public/node_modules/tinymce/skins');
mix.copyDirectory('node_modules/tinymce/themes', 'public/node_modules/tinymce/themes');
mix.copy('node_modules/tinymce/jquery.tinymce.js', 'public/node_modules/tinymce/jquery.tinymce.js');
mix.copy('node_modules/tinymce/jquery.tinymce.min.js', 'public/node_modules/tinymce/jquery.tinymce.min.js');
mix.copy('node_modules/tinymce/tinymce.js', 'public/node_modules/tinymce/tinymce.js');
mix.copy('node_modules/tinymce/tinymce.min.js', 'public/node_modules/tinymce/tinymce.min.js');

W powyższym kodzie używamy funkcji Compiling Assets(Mix) Laravela.

Następnie uruchom polecenie, które kopiuje pliki i foldery z „node_modules/tinymce” do katalogu „public”.

npm run dev

Teraz jesteśmy gotowi do użycia edytora TinyMCE w pliku blade. Dołącz tinymce.jsplik i wywołaj edytor w następujący sposób.

<textarea class="description" name="description"></textarea>
<script src="{{ asset('node_modules/tinymce/tinymce.js') }}"></script>
<script>
    tinymce.init({
        selector:'textarea.description',
        width: 900,
        height: 300
    });
</script>

Powinieneś teraz zobaczyć edytor TinyMCE na swojej stronie, tak jak na poniższym zrzucie ekranu.

Zainstaluj TinyMCE za pomocą CDN

Do tej pory widzieliśmy, jak zainstalować edytor TinyMCE za pomocą npm, co jest zalecanym sposobem. Innym sposobem korzystania z TinyMCE jest CDN. Korzystając z CDN, nie musisz przechowywać plików bibliotecznych na swoim serwerze. Zawiera bezpośrednio wymagane pliki z hostowanego serwera.

Użytkownik może korzystać z TinyMCE przez CDN w następujący sposób.

<textarea class="description" name="description"></textarea>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector:'textarea.description',
        width: 900,
        height: 300
    });
</script>

Otóż to! Mam nadzieję, że rozumiesz, jak zainstalować i używać edytora TinyMCE w Laravelu. Chciałbym usłyszeć wasze przemyślenia i sugestie w sekcji komentarzy poniżej.

Powiązane artykuły

Źródło nagrywania: artisansweb.net