Kuinka asentaa ja käyttää TinyMCE Editoria Laravelissa
Aiemmin olen julkaissut artikkelin Kuinka käyttää CKEditoria Laravelissa. Viitaten kyseiseen artikkeliin monet lukijat pyysivät kirjoittamaan viestin TinyMCE-editorin käytöstä Laravelissa. TinyMCE on myös yksi suosituimmista WYSIWYG HTML -editorista, kuten CKEditor. Tässä artikkelissa tutkitaan, miten TinyMCE-editori asennetaan ja käytetään Laravel-sovelluksessa.
Työskennellessämme verkossa meidän on joskus tallennettava pitkiä sisältöjä, kuvia ja rikastekoodinpätkiä tietokantaan. Tämä sisältö voi olla elämäkerta, tuotteen yhteenveto, sivun sisältö jne. Kaikki nämä muodot edellyttävät eri HTML-tunnisteiden käyttöä. HTML: n textarea-tunniste ei ole käyttäjäystävällinen, kun on kyse HTML-elementtejä sisältävän sisällön kirjoittamisesta. Tässä tulisi käyttää verkkotekstieditoria.
TinyMCE ja CKEditor ovat suosittuja toimittajia. Voit valita kumman tahansa. Molemmat WYSIWYG-editorit (mitä näet, mitä saat) ovat kevyitä ja toimivat täydellisesti verkkosovelluksiin.
TinyMCE-editoria voidaan käyttää rajoitettujen työkalujen kanssa. Jos haluat käyttää premium-laajennuksiaan, tarkista heidän hinnoittelusivunsa.
Asenna ja käytä TinyMCE Editoria Laravelissa
TinyMCE-editorin integroimiseksi Laraveliin aion käyttää TinyMCE: n pakettia npm. Laravel tarjoaa sisäänrakennetun tuen nopeudelle minuutissa. Kaikki mitä tarvitset varmistaaksesi, että Node.js on asennettu järjestelmään. Avaa pääte projektisi juurihakemistossa ja suorita komento asentaaksesi ensin npm-riippuvuudet.
npm installTämän jälkeen asenna TinyMCE käyttämällä komentoa npm komennolla:
npm i tinymceKun olet valmis, siirryt hakemistoon ‘node_modules / tinymce’, näet muutaman tiedoston ja kansion. Jotkut niistä on kopioitava ja sijoitettava julkiseen hakemistoon. Voit tehdä niin avaamalla webpack.mix.jstiedoston ja lisäämällä siihen alla olevan koodin.
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');Yllä olevassa koodissa käytämme Laravelin Computing Assets (Mix) -ominaisuutta.
Suorita seuraavaksi komento, joka kopioi tiedostot ja kansiot solmusta_modules / tinymce julkiseen hakemistoon.
npm run devNyt olemme valmiita käyttämään TinyMCE-editoria terätiedostossa. Liitä tinymce.jstiedosto mukaan ja soita editorille seuraavasti.
<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>Sinun pitäisi nyt nähdä TinyMCE-editori sivullasi aivan kuten alla oleva kuvakaappaus.
Asenna TinyMCE CDN: n avulla
Toistaiseksi olemme nähneet, kuinka TinyMCE-editori asennetaan npm: llä suositellulla tavalla. Toinen tapa käyttää TinyMCE: tä on CDN. CDN: n avulla sinun ei tarvitse pitää kirjastotiedostoja palvelimellasi. Se sisältää suoraan vaaditut tiedostot isännöimältä palvelimelta.
Käyttäjä voi käyttää TinyMCE: tä CDN: n kautta seuraavasti.
<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>Se siitä! Toivon, että ymmärrät kuinka TinyMCE-editori asennetaan ja käytetään Laravelissa. Haluaisin kuulla ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.