Sådan opsættes TinyMCE i din Rails-app ved hjælp af Webpack

Populariteten af ​​at bruge Webpack til at håndtere dine aktiver i Rails øges støt. Kom godt i gang er virkelig ligetil. Hvis du starter en ny app, kører du simpelthen rails new my_app --webpackog Rails tager sig af resten.

Takket være webpacker-perlen er tilføjelse af Webpack til din eksisterende applikation også ret ukompliceret. Du tilføjer perlen til din Gemfile, bundter og installerer endelig webpacker:

gem 'webpacker', '~> 3.5'bundlebundle exec rails webpacker:install

Dette er ret sødt. Nu er alt hvad du skal gøre, at linke din JavaScript-pakke og CSS importeret i den til hovedet på din application.html.haml:

Når dette er gjort, er du klar til at skrive din moderne JavaScript-kode og gøre brug af alle de store biblioteker derude.

Hvad er tinyMCE?

TinyMCE er en rich text editor i skyen. For at sige det enkelt er det som Word, der kan implementeres i din app.

Det projekt, jeg arbejder på, bruger det til at lade administratorer redigere indholdet på forsiden. Takket være TinyMCE er det ikke nødvendigt at oprette en separat admin-grænseflade til dette formål. Men redaktørens brug kan være meget mere alsidig. Tænk for eksempel på, hvad Wordpress eller Evernote giver dig mulighed for at gøre takket være deres indbyggede værktøjer.

Anvendelse via CDN

Vi implementerede oprindeligt editoren via CDN (f.eks. At linke scriptet i hovedet på vores application.html.haml) sådan:

!!!%html %head %meta ...  %title ...  = csrf_meta_tags
 %script{src: '//cloud.tinymce.com/stable/tinymce.min.js?apiKey=gexncjni90zx3qf0m5rr7kl8l40wd5yuly2xjza0g3kwrljt'} = stylesheet_link_tag 'application', media: 'all' = javascript_include_tag 'application' %body 

Dette krævede tilføjelse af en fil med vores tilpassede funktion i app/assets/javascript/tinyMce.js. Bemærk, at vi også bruger jQuery.

$( document ).on('turbolinks:load', function() {
 tinyMCE.init({ selector: 'textarea.tinymce', // some other settings, like height, language, // order of buttons on your toolbar etc. plugins: [ 'table', 'lists' // whatever plugins you want to add ] });});

Derudover måtte vi medtage en oversættelsesfil (hvilket ikke er nødvendigt, hvis du bruger engelsk i din app). For at alt skal vises korrekt i produktionen, skal du også få en gratis Tiny Cloud API-nøgle.

Webpack og tinyMCE

Alt fungerede godt i et par måneder, men vi besluttede, at det var tid til overgangen til Webpack.

Webpack skal gøre dit liv lettere og sammen med garn kan du fokusere på de vigtige ting. Sig, at du vil bruge pakke A. Det sker således, at pakke A er afhængig af pakker B og C. Og pakke B afhænger af D, E og F. I stedet for at bruge timer på at finde ud af, hvad afhængighederne er og installere dem alle individuelt, hvad du vil, er at sige yarn add package-Aog få det regnet ud for dig. Og det er næsten tilfældet.

Denne overgang, når det kom til tinyMCE, var langt mere smertefuld, end den burde have været. Og det er derfor, jeg besluttede at skrive dette indlæg. Jeg håber, det sparer nogen tid og frustration.

Hvis du tidligere havde tinyMCE implementeret via CDN , vil du gerne slippe af med nogle ting for at starte rent. Fjern scriptlinket fra application.html.haml. Kommenter derefter indholdet af tinyMce.jsfilen (og sprogfilen, hvis du bruger en). Jeg besluttede også at slippe af med jQuery-afhængigheden (i vores tilfælde betød det at fjerne gem 'jquery-rails'fra Gemfile og app/assets/javascripts/application.jsfjerne //= require jqueryog erstatte //= require jquery_ujsmed //= require rails-ujs).

Bemærk: Fortsæt med forsigtighed, hvis du har flere eksterne biblioteker i dit projekt, der er afhængige af jQuery (f.eks. Bootstrap eller Select2). I sidste ende ville dit mål sandsynligvis være at flytte dem alle til Webpack, men jo større projekt, jo mere kompleks kunne opgaven være, så husk det bare. Intet forhindrer dig i at holde din traditionelle implementering parallel med Webpack-en. I så fald vil jeg stadig anbefale at kommentere det til tidspunktet for implementering af tinyMCE.

Alle disse trin vil sikre, at ting, vi implementerer fra nu af, fungerer, og at den gamle implementering ikke fungerer som en reserve.

Trin 1. Hvis du vil bruge jQuery via webpack

Tilføjelse af jQuery via Webpack er så simpelt som at køre yarn add jqueryog tilføje følgende kode til config/webpack/environment.js:

const { environment } = require('@rails/webpacker')const webpack = require('webpack')environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }))module.exports = environment

Trin 2. Hent tinyMCE-pakken

Det er også ret ligetil: løb yarn add tinymce.

Opret derefter en ny fil, hvor vi placerer vores funktion. Jeg endte app/javascript/vendor/tinyMce.jsmed følgende indhold:

import tinymce from 'tinymce/tinymce';import 'tinymce/themes/modern/theme';import 'tinymce/plugins/table';import 'tinymce/plugins/lists';
function tinyMce() { tinymce.init({ selector: 'textarea.tinymce',
 // some other settings, like height, language, // order of buttons on your toolbar etc.
 plugins: [ 'table', 'lists' ] });}
// if you're using a language file, you can place its content here
export { tinyMce };

Trin 3. Importer alt til application.js

Vi kan importere vores funktion sådan:

import { tinyMce } from "../vendor/tinyMce";

og kald det derefter:

document.addEventListener(“turbolinks:load”, function () { tinyMce(); });

Som du kan se, erstattede vi også jQuery-koden med ES6.

Trin 4. Få den lilleMCE-hud til at virke

Hvis du kører din, webpack-dev-serverog rails sdu måske bliver overrasket over at se, at din teksteditor ikke er der. Et blik i konsollen, og du vil se følgende fejl:

Dette skyldes, at tinyMCE ikke fungerer uden hud, og at trække det ind gennem Webpack kræver dets eksplicitte import. Vi kan gøre dette ved at medtage denne linje i vores tinyMce.jsfil lige efter de andre importopgørelser. Stien er i forhold til node_modulesmappen:

import ‘tinymce/skins/lightgray/skin.min.css’;

På dette tidspunkt skal du have din redaktør til at arbejde.

Men ... hvis du kigger ind i konsollen, kan du blive skuffet over at se, at du stadig får 2 fejl:

Fortvivl ikke! Der er en let løsning. Bare tilføj skin: falsetil din function tinyMce()konfiguration, og det skal gøre tricket. Dette forhindrer standardfiler i at indlæses.

Tillykke! Du har lige fået din tinyMCE i gang!