✅ WEB ja WordPressi uudised, teemad, pistikprogrammid. Siin jagame näpunäiteid ja parimaid veebisaidi lahendusi.

TinyMCE redigeerija installimine ja kasutamine Laravelis

19

Varem olen avaldanud artikli Kuidas kasutada CKEditorit Laravelis. Sellele artiklile viidates palusid paljud lugejad kirjutada postituse selle kohta, kuidas kasutada TinyMCE redaktorit Laravelis. TinyMCE on ka üks populaarsemaid WYSIWYG HTML-i redigeerijaid nagu CKEditor. Selles artiklis uurime, kuidas installida ja kasutada TinyMCE-redaktorit Laraveli rakenduses.

Veebitöö ajal peame mõnikord andmebaasi salvestama pikki sisu, pilte ja rikkalikke juppe. See sisu võib olla elulugu, toote kokkuvõte, lehe sisu jne. Kõik need vormingud nõuavad erinevate HTML-siltide kasutamist. HTML-i tekstimärgend ei ole HTML-elemente sisaldava sisu kirjutamisel kasutajasõbralik. Siin peaksite kasutama veebi tekstiredaktoreid.

TinyMCE ja CKEditor on populaarsed toimetajad. Teil on valida üks neist. Mõlemad WYSIWYG-redaktorid (mida näete, on need, mida saate) on kerged ja töötavad veebirakenduste jaoks ideaalselt.

TinyMCE redaktorit on piiratud tööriistadega tasuta kasutada. Kui keegi soovib kasutada oma esmaklassilisi pistikprogramme, siis kontrollige palun tema hinnalehte.

Installige ja kasutage Linyeli redaktorit TinyMCE

TinyMCE redaktori integreerimiseks Laraveli kasutan TinyMCE jaoks paketti npm. Laravel pakub sisseehitatud tuge npm-le. Kõik, mida peate veenduma, et Node.js on teie süsteemi installitud. Avage terminal oma projekti juurkataloogis ja käivitage käsk, et kõigepealt installida sõltuvused npm-st.

npm install

Pärast seda installige TinyMCE, kasutades käsku npm:

npm i tinymce

Kui olete lõpetanud, liigute kataloogi node_modules / tinymce ja näete mõnda faili ja kausta. Peame mõned neist kopeerima ja paigutama kataloogi „avalik". Selleks avage webpack.mix.jsfail ja lisage sellesse allolev kood.

veebipakk.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');

Ülaltoodud koodis kasutame Laraveli funktsiooni Varade kompileerimine (segu).

Järgmisena käivitage käsk, mis kopeerib failid ja kaustad kaustast „node_modules / tinymce” kataloogi „public”.

npm run dev

Nüüd oleme valmis failis TinyMCE redaktorit kasutama. Kaasake tinymce.jsfail ja helistage redaktorile järgmiselt.

<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>

Nüüd peaksite oma lehel nägema redaktorit TinyMCE, nagu ka allolevat ekraanipilti.

Installige TinyMCE CDN-i abil

Siiani oleme näinud, kuidas TinyMCE redaktorit installida npm abil, mis on soovitatav viis. Teine võimalus TinyMCE kasutamiseks on CDN. CDN-i kasutades ei pea te raamatukogu faile oma serveris hoidma. See sisaldab otseselt hostitud serveri nõutavaid faile.

Kasutaja saab TinyMCE-d kasutada CDN-i kaudu järgmiselt.

<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>

See selleks! Loodan, et saate aru, kuidas TinyMCE redaktorit Laravelis installida ja kasutada. Tahaksin kuulda teie mõtteid ja ettepanekuid allpool olevas kommentaaride jaotises.

seotud artiklid

See veebisait kasutab teie kasutuskogemuse parandamiseks küpsiseid. Eeldame, et olete sellega rahul, kuid saate soovi korral loobuda. Nõustu Loe rohkem