{"id":28258,"date":"2021-05-23T10:53:00","date_gmt":"2021-05-23T07:53:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28258"},"modified":"2021-10-18T03:42:44","modified_gmt":"2021-10-18T00:42:44","slug":"jak-zainstalowac-i-uzywac-edytora-tinymce-w-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-zainstalowac-i-uzywac-edytora-tinymce-w-laravel\/","title":{"rendered":"Jak zainstalowa\u0107 i u\u017cywa\u0107 edytora TinyMCE w Laravel?"},"content":{"rendered":"

W przesz\u0142o\u015bci publikowa\u0142em artyku\u0142 Jak u\u017cywa\u0107 CKEditor w Laravelu<\/a>. W zwi\u0105zku z tym artyku\u0142em wielu czytelnik\u00f3w prosi\u0142o o napisanie posta o tym, jak korzysta\u0107 z edytora TinyMCE w Laravelu<\/strong>. TinyMCE jest r\u00f3wnie\u017c jednym z popularnych edytor\u00f3w HTML typu WYSIWYG, takich jak CKEditor. W tym artykule dowiemy si\u0119, jak zainstalowa\u0107 i u\u017cywa\u0107 edytora TinyMCE w aplikacji Laravel.<\/p>\n

Pracuj\u0105c w sieci, czasami musimy przechowywa\u0107 w bazie danych d\u0142ugie tre\u015bci, obrazy i fragmenty rozszerzone. Ta tre\u015b\u0107 mo\u017ce by\u0107 biografi\u0105, podsumowaniem produktu, tre\u015bci\u0105 strony itp. Wszystkie te formaty wymagaj\u0105 u\u017cycia r\u00f3\u017cnych znacznik\u00f3w HTML. Znacznik textarea w HTML nie jest przyjazny dla u\u017cytkownika, je\u015bli chodzi o pisanie tre\u015bci zawieraj\u0105cych elementy HTML. W tym miejscu powiniene\u015b u\u017cywa\u0107 internetowych edytor\u00f3w tekstu<\/a>.<\/p>\n

TinyMCE i CKEditor to popularne edytory. Od Ciebie zale\u017cy, czy wybierzesz jeden z nich. Oba edytory WYSIWYG (otrzymujesz to, co widzisz) s\u0105 lekkie i doskonale sprawdzaj\u0105 si\u0119 w aplikacjach internetowych.<\/p>\n

Edytor TinyMCE jest darmowy z ograniczonymi narz\u0119dziami. Je\u015bli chcesz korzysta\u0107 z ich wtyczek premium, sprawd\u017a ich stron\u0119 z cenami<\/a>.<\/p>\n

Zainstaluj i u\u017cywaj edytora TinyMCE w Laravel<\/h2>\n

Aby zintegrowa\u0107 edytor TinyMCE z Laravel, u\u017cyj\u0119 pakietu npm dla TinyMCE<\/a>. Laravel zapewnia wbudowan\u0105 obs\u0142ug\u0119 npm. Wszystko, czego potrzebujesz, aby upewni\u0107 si\u0119, \u017ce Node.js<\/a> jest zainstalowany w Twoim systemie. Otw\u00f3rz terminal w katalogu g\u0142\u00f3wnym projektu i uruchom polecenie, aby najpierw zainstalowa\u0107 zale\u017cno\u015bci npm.<\/p>\n

npm install<\/code><\/pre>\n
Nast\u0119pnie zainstaluj TinyMCE za pomoc\u0105 npm poleceniem:<\/p>\n
npm i tinymce<\/code><\/pre>\n
Po zako\u0144czeniu, je\u015bli przejdziesz do katalogu \u201enode_modules\/tinymce", zobaczysz kilka plik\u00f3w i folder\u00f3w. Niekt\u00f3re z nich musimy skopiowa\u0107 i umie\u015bci\u0107 w katalogu 'public’. Aby to zrobi\u0107, otw\u00f3rz webpack.mix.js<\/code>plik i dodaj do niego poni\u017cszy kod.<\/p>\n
webpack.mix.js<\/strong><\/p>\n
....\n....\nmix.copyDirectory('node_modules\/tinymce\/icons', 'public\/node_modules\/tinymce\/icons');\nmix.copyDirectory('node_modules\/tinymce\/plugins', 'public\/node_modules\/tinymce\/plugins');\nmix.copyDirectory('node_modules\/tinymce\/skins', 'public\/node_modules\/tinymce\/skins');\nmix.copyDirectory('node_modules\/tinymce\/themes', 'public\/node_modules\/tinymce\/themes');\nmix.copy('node_modules\/tinymce\/jquery.tinymce.js', 'public\/node_modules\/tinymce\/jquery.tinymce.js');\nmix.copy('node_modules\/tinymce\/jquery.tinymce.min.js', 'public\/node_modules\/tinymce\/jquery.tinymce.min.js');\nmix.copy('node_modules\/tinymce\/tinymce.js', 'public\/node_modules\/tinymce\/tinymce.js');\nmix.copy('node_modules\/tinymce\/tinymce.min.js', 'public\/node_modules\/tinymce\/tinymce.min.js');<\/code><\/pre>\n
W powy\u017cszym kodzie u\u017cywamy funkcji Compiling Assets(Mix)<\/a> Laravela.<\/p>\n
Nast\u0119pnie uruchom polecenie, kt\u00f3re kopiuje pliki i foldery z \u201enode_modules\/tinymce” do katalogu \u201epublic”.<\/p>\n
npm run dev<\/code><\/pre>\n
Teraz jeste\u015bmy gotowi do u\u017cycia edytora TinyMCE w pliku blade. Do\u0142\u0105cz tinymce.js<\/code>plik i wywo\u0142aj edytor w nast\u0119puj\u0105cy spos\u00f3b.<\/p>\n
<textarea class=\"description\" name=\"description\"><\/textarea>\n<script src=\"{{ asset('node_modules\/tinymce\/tinymce.js') }}\"><\/script>\n<script>\n\u00a0\u00a0\u00a0\u00a0tinymce.init({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0selector:'textarea.description',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 900,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 300\n\u00a0\u00a0\u00a0\u00a0});\n<\/script><\/code><\/pre>\n
Powiniene\u015b teraz zobaczy\u0107 edytor TinyMCE na swojej stronie, tak jak na poni\u017cszym zrzucie ekranu.<\/p>\n
Zainstaluj TinyMCE za pomoc\u0105 CDN<\/h2>\n
Do tej pory widzieli\u015bmy, jak zainstalowa\u0107 edytor TinyMCE za pomoc\u0105 npm, co jest zalecanym sposobem. Innym sposobem korzystania z TinyMCE jest CDN. Korzystaj\u0105c z CDN, nie musisz przechowywa\u0107 plik\u00f3w bibliotecznych na swoim serwerze. Zawiera bezpo\u015brednio wymagane pliki z hostowanego serwera.<\/p>\n
U\u017cytkownik mo\u017ce korzysta\u0107 z TinyMCE przez CDN w nast\u0119puj\u0105cy spos\u00f3b.<\/p>\n
<textarea class=\"description\" name=\"description\"><\/textarea>\n<script src=\"https:\/\/cloud.tinymce.com\/stable\/tinymce.min.js\"><\/script>\n<script>\n\u00a0\u00a0\u00a0\u00a0tinymce.init({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0selector:'textarea.description',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 900,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 300\n\u00a0\u00a0\u00a0\u00a0});\n<\/script><\/code><\/pre>\n
Ot\u00f3\u017c \u200b\u200bto! Mam nadziej\u0119, \u017ce rozumiesz, jak zainstalowa\u0107 i u\u017cywa\u0107 edytora TinyMCE w Laravelu. Chcia\u0142bym us\u0142ysze\u0107 wasze przemy\u015blenia i sugestie w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h3>\n