{"id":28426,"date":"2021-05-23T11:40:00","date_gmt":"2021-05-23T08:40:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28426"},"modified":"2021-10-17T04:42:31","modified_gmt":"2021-10-17T01:42:31","slug":"hur-man-installerar-och-anvander-tinymce-editor-i-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-installerar-och-anvander-tinymce-editor-i-laravel\/","title":{"rendered":"Hur man installerar och anv\u00e4nder TinyMCE Editor i Laravel"},"content":{"rendered":"

Tidigare har jag publicerat en artikel Hur man anv\u00e4nder CKEditor i Laravel<\/a>. Med h\u00e4nvisning till den artikeln bad m\u00e5nga l\u00e4sare att skriva inl\u00e4gget om hur man anv\u00e4nder TinyMCE-redigeraren i Laravel<\/strong>. TinyMCE \u00e4r ocks\u00e5 en av de popul\u00e4ra WYSIWYG HTML-redigerarna som CKEditor. I den h\u00e4r artikeln studerar vi hur man installerar och anv\u00e4nder TinyMCE-redigeraren i Laravel-applikationen.<\/p>\n

N\u00e4r vi arbetar p\u00e5 webben beh\u00f6ver vi ibland lagra l\u00e5ngt inneh\u00e5ll, bilder och rich snippets i databasen. Detta inneh\u00e5ll kan vara en biografi, produkt\u00f6versikt, sidinneh\u00e5ll etc. Alla dessa format kr\u00e4ver att du anv\u00e4nder olika HTML-taggar. Textarea-taggen f\u00f6r HTML \u00e4r inte anv\u00e4ndarv\u00e4nlig n\u00e4r det g\u00e4ller att skriva inneh\u00e5ll inklusive HTML-element. Det \u00e4r h\u00e4r du b\u00f6r anv\u00e4nda webbtextredigerare<\/a>.<\/p>\n

TinyMCE och CKEditor \u00e4r popul\u00e4ra redakt\u00f6rer. Det \u00e4r upp till dig att v\u00e4lja n\u00e5gon. B\u00e5da WYSIWYG (vad du ser \u00e4r vad du f\u00e5r) redakt\u00f6rer \u00e4r l\u00e4tta och fungerar perfekt f\u00f6r webbapplikationer.<\/p>\n

TinyMCE-redigeraren \u00e4r gratis att anv\u00e4nda med de begr\u00e4nsade verktygen. Om man vill anv\u00e4nda sina premium-plugins, v\u00e4nligen kolla deras prissida<\/a>.<\/p>\n

Installera och anv\u00e4nd TinyMCE Editor i Laravel<\/h2>\n

F\u00f6r att integrera TinyMCE-redakt\u00f6ren i Laravel ska jag anv\u00e4nda npm-paketet f\u00f6r TinyMCE<\/a>. Laravel tillhandah\u00e5ller inbyggt st\u00f6d f\u00f6r npm. Allt du beh\u00f6ver f\u00f6r att s\u00e4kerst\u00e4lla att Node.js<\/a> \u00e4r installerat p\u00e5 ditt system. \u00d6ppna terminalen i din projektrotkatalog och k\u00f6r kommandot f\u00f6r att installera npm-beroenden f\u00f6rst.<\/p>\n

npm install<\/code><\/pre>\n
Efter detta installerar du TinyMCE med npm med kommandot:<\/p>\n
npm i tinymce<\/code><\/pre>\n
N\u00e4r du \u00e4r klar, om du g\u00e5r \u00f6ver till katalogen ’node_modules \/ tinymce’ kommer du att se n\u00e5gra filer och mappar. Vi m\u00e5ste kopiera n\u00e5gra av dem och placera dem i den "offentliga" katalogen. F\u00f6r att g\u00f6ra det, \u00f6ppna webpack.mix.js<\/code>filen och l\u00e4gg till koden nedan i den.<\/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
I ovanst\u00e5ende kod anv\u00e4nder vi<\/a> funktionen Compiling Assets (Mix)<\/a> i Laravel.<\/p>\n
K\u00f6r sedan kommandot som kopierar filer och mappar fr\u00e5n ’node_modules \/ tinymce’ till ’public’ -katalogen.<\/p>\n
npm run dev<\/code><\/pre>\n
Nu \u00e4r vi redo att anv\u00e4nda TinyMCE-redigeraren i bladfilen. Inkludera tinymce.js<\/code>filen och ring redakt\u00f6ren enligt f\u00f6ljande.<\/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
Du b\u00f6r nu se TinyMCE-redigeraren p\u00e5 din sida precis som sk\u00e4rmdumpen nedan.<\/p>\n
Installera TinyMCE med CDN<\/h2>\n
Hittills har vi sett hur man installerar TinyMCE-redigeraren med hj\u00e4lp av npm, vilket \u00e4r ett rekommenderat s\u00e4tt. Ett annat s\u00e4tt att anv\u00e4nda TinyMCE \u00e4r via CDN. Med hj\u00e4lp av CDN beh\u00f6ver du inte beh\u00e5lla biblioteksfiler p\u00e5 din server. Den inneh\u00e5ller direkt n\u00f6dv\u00e4ndiga filer fr\u00e5n en v\u00e4rdserver.<\/p>\n
Anv\u00e4ndaren kan anv\u00e4nda TinyMCE via CDN enligt f\u00f6ljande.<\/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
Det \u00e4r allt! Jag hoppas att du f\u00f6rst\u00e5r hur du installerar och anv\u00e4nder TinyMCE-redigeraren i Laravel. Jag skulle vilja h\u00f6ra dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h3>\n