{"id":24649,"date":"2021-05-23T11:33:00","date_gmt":"2021-05-23T08:33:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24649"},"modified":"2021-10-17T20:43:57","modified_gmt":"2021-10-17T17:43:57","slug":"kuinka-asentaa-ja-kayttaa-tinymce-editoria-laravelissa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-asentaa-ja-kayttaa-tinymce-editoria-laravelissa\/","title":{"rendered":"Kuinka asentaa ja k\u00e4ytt\u00e4\u00e4 TinyMCE Editoria Laravelissa"},"content":{"rendered":"

Aiemmin olen julkaissut artikkelin Kuinka k\u00e4ytt\u00e4\u00e4 CKEditoria Laravelissa<\/a>. Viitaten kyseiseen artikkeliin monet lukijat pyysiv\u00e4t kirjoittamaan viestin TinyMCE-editorin k\u00e4yt\u00f6st\u00e4 Laravelissa<\/strong>. TinyMCE on my\u00f6s yksi suosituimmista WYSIWYG HTML -editorista, kuten CKEditor. T\u00e4ss\u00e4 artikkelissa tutkitaan, miten TinyMCE-editori asennetaan ja k\u00e4ytet\u00e4\u00e4n Laravel-sovelluksessa.<\/p>\n

Ty\u00f6skennelless\u00e4mme verkossa meid\u00e4n on joskus tallennettava pitki\u00e4 sis\u00e4lt\u00f6j\u00e4, kuvia ja rikastekoodinp\u00e4tki\u00e4 tietokantaan. T\u00e4m\u00e4 sis\u00e4lt\u00f6 voi olla el\u00e4m\u00e4kerta, tuotteen yhteenveto, sivun sis\u00e4lt\u00f6 jne. Kaikki n\u00e4m\u00e4 muodot edellytt\u00e4v\u00e4t eri HTML-tunnisteiden k\u00e4ytt\u00f6\u00e4. HTML: n textarea-tunniste ei ole k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llinen, kun on kyse HTML-elementtej\u00e4 sis\u00e4lt\u00e4v\u00e4n sis\u00e4ll\u00f6n kirjoittamisesta. T\u00e4ss\u00e4 tulisi k\u00e4ytt\u00e4\u00e4 verkkotekstieditoria<\/a>.<\/p>\n

TinyMCE ja CKEditor ovat suosittuja toimittajia. Voit valita kumman tahansa. Molemmat WYSIWYG-editorit (mit\u00e4 n\u00e4et, mit\u00e4 saat) ovat kevyit\u00e4 ja toimivat t\u00e4ydellisesti verkkosovelluksiin.<\/p>\n

TinyMCE-editoria voidaan k\u00e4ytt\u00e4\u00e4 rajoitettujen ty\u00f6kalujen kanssa. Jos haluat k\u00e4ytt\u00e4\u00e4 premium-laajennuksiaan, tarkista heid\u00e4n hinnoittelusivunsa<\/a>.<\/p>\n

Asenna ja k\u00e4yt\u00e4 TinyMCE Editoria Laravelissa<\/h2>\n

TinyMCE-editorin integroimiseksi Laraveliin aion k\u00e4ytt\u00e4\u00e4 TinyMCE: n pakettia npm<\/a>. Laravel tarjoaa sis\u00e4\u00e4nrakennetun tuen nopeudelle minuutissa. Kaikki mit\u00e4 tarvitset varmistaaksesi, ett\u00e4 Node.js<\/a> on asennettu j\u00e4rjestelm\u00e4\u00e4n. Avaa p\u00e4\u00e4te projektisi juurihakemistossa ja suorita komento asentaaksesi ensin npm-riippuvuudet.<\/p>\n

npm install<\/code><\/pre>\n
T\u00e4m\u00e4n j\u00e4lkeen asenna TinyMCE k\u00e4ytt\u00e4m\u00e4ll\u00e4 komentoa npm komennolla:<\/p>\n
npm i tinymce<\/code><\/pre>\n
Kun olet valmis, siirryt hakemistoon ’node_modules \/ tinymce’, n\u00e4et muutaman tiedoston ja kansion. Jotkut niist\u00e4 on kopioitava ja sijoitettava julkiseen hakemistoon. Voit tehd\u00e4 niin avaamalla webpack.mix.js<\/code>tiedoston ja lis\u00e4\u00e4m\u00e4ll\u00e4 siihen alla olevan koodin.<\/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
Yll\u00e4 olevassa koodissa k\u00e4yt\u00e4mme Laravelin Computing Assets (Mix)<\/a> -ominaisuutta.<\/p>\n
Suorita seuraavaksi komento, joka kopioi tiedostot ja kansiot solmusta_modules \/ tinymce julkiseen hakemistoon.<\/p>\n
npm run dev<\/code><\/pre>\n
Nyt olemme valmiita k\u00e4ytt\u00e4m\u00e4\u00e4n TinyMCE-editoria ter\u00e4tiedostossa. Liit\u00e4 tinymce.js<\/code>tiedosto mukaan ja soita editorille seuraavasti.<\/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
Sinun pit\u00e4isi nyt n\u00e4hd\u00e4 TinyMCE-editori sivullasi aivan kuten alla oleva kuvakaappaus.<\/p>\n
Asenna TinyMCE CDN: n avulla<\/h2>\n
Toistaiseksi olemme n\u00e4hneet, kuinka TinyMCE-editori asennetaan npm: ll\u00e4 suositellulla tavalla. Toinen tapa k\u00e4ytt\u00e4\u00e4 TinyMCE: t\u00e4 on CDN. CDN: n avulla sinun ei tarvitse pit\u00e4\u00e4 kirjastotiedostoja palvelimellasi. Se sis\u00e4lt\u00e4\u00e4 suoraan vaaditut tiedostot is\u00e4nn\u00f6im\u00e4lt\u00e4 palvelimelta.<\/p>\n
K\u00e4ytt\u00e4j\u00e4 voi k\u00e4ytt\u00e4\u00e4 TinyMCE: t\u00e4 CDN: n kautta seuraavasti.<\/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
Se siit\u00e4! Toivon, ett\u00e4 ymm\u00e4rr\u00e4t kuinka TinyMCE-editori asennetaan ja k\u00e4ytet\u00e4\u00e4n Laravelissa. Haluaisin kuulla ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h3>\n