Kako postaviti TinyMCE u svojoj aplikaciji Rails pomoću Webpack-a

Programiranje

Popularnost korištenja Webpacka za rješavanje vaše imovine u Railsu neprestano raste. Početak je stvarno jednostavan. Ako pokrećete novu aplikaciju, jednostavno pokrenete, rails new my_app --webpacka Rails brine o ostatku.

Zahvaljujući dragulju webpacker, dodavanje Webpacka u vašu postojeću aplikaciju također je prilično jednostavno. Dodate dragulj u svoj Gemfile, paket i na kraju instalirate webpacker:

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

Ovo je prilično slatko. Sada sve što trebate je povezati svoj JavaScript paket i CSS uvezen u njega u glavu vašeg application.html.haml:

Nakon što to učinite, spremni ste za pisanje svog modernog JavaScript koda i korištenje svih sjajnih knjižnica tamo.

Što je tinyMCE?

TinyMCE je bogati uređivač teksta u oblaku. Pojednostavljeno, to je poput Worda koji se može implementirati u vašu aplikaciju.

Projekt na kojem radim koristi ga kako bi administratori mogli uređivati ​​sadržaj naslovne stranice. Zahvaljujući TinyMCE, u tu svrhu nije potrebno graditi zasebno administrativno sučelje. Ali uporaba urednika može biti mnogo svestranija. Razmislite, na primjer, o tome što vam Wordpress ili Evernote omogućuju zahvaljujući njihovom ugrađenom alatu.

Upotreba putem CDN-a

Izvorno smo implementirali uređivač putem CDN-a (npr. Povezujući skriptu u glavu našeg application.html.haml) ovako:

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

To je zahtijevalo dodavanje datoteke s našom prilagođenom funkcijom u app/assets/javascript/tinyMce.js. Imajte na umu da također koristimo 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 ] });});

Uz to, morali smo uključiti i prijevodnu datoteku (što nije potrebno ako u aplikaciji koristite engleski jezik). Da bi se sve pravilno prikazalo u proizvodnji, morat ćete dobiti i besplatni ključ API-ja Tiny Cloud.

Webpack i tinyMCE

Nekoliko je mjeseci sve izvrsno funkcioniralo, ali zaključili smo da je vrijeme za prelazak na Webpack.

Webpack bi vam trebao olakšati život, a zajedno s pređom omogućuje vam da se usredotočite na važne stvari. Recimo da želite koristiti paket A. Dogodi se da se paket A oslanja na pakete B i C. A paket B ovisi o D, E i F. Umjesto da trošite sate na otkrivanje ovisnosti i instalirate ih sve pojedinačno, što želite reći yarn add package-A, i neka vam to skuže. I to je gotovo slučaj.

Taj je prijelaz kada je riječ o tinyMCE bio puno bolniji nego što je trebao biti. I zato sam odlučio napisati ovaj post. Nadam se da će to nekome uštedjeti vrijeme i frustraciju.

Ako ste prethodno imali implementirani tinyMCE putem CDN-a , željeli biste se riješiti nekih stvari i započeti čišćenje. Uklonite vezu skripte sa application.html.haml. Zatim komentirajte sadržaj tinyMce.jsdatoteke (i jezičnu datoteku ako je koristite). Također sam se odlučio riješiti jQuery ovisnosti (u našem slučaju to je značilo uklanjanje gem 'jquery-rails'iz Gemfilea, te app/assets/javascripts/application.jsuklanjanje //= require jqueryi zamjena //= require jquery_ujssa //= require rails-ujs).

Napomena: Nastavite s oprezom ako u projektu imate više vanjskih knjižnica koje se oslanjaju na jQuery (npr. Bootstrap ili Select2). Konačno bi vam cilj vjerojatno bio premjestiti ih na Webpack, ali što je veći projekt, taj zadatak može biti složeniji, zato samo imajte na umu. Ništa vas ne sprječava da svoju tradicionalnu implementaciju držite paralelno s onom Webpack. U tom bih slučaju još uvijek preporučio da se to komentira za vrijeme implementacije tinyMCE.

Svi ovi koraci osigurat će da stvari koje ćemo od sada implementirati funkcioniraju, a stara implementacija ne funkcionira kao zamjenska.

Korak 1. Ako želite koristiti jQuery putem webpacka

Dodavanje jQueryja putem Webpacka jednostavno je poput pokretanja yarn add jqueryi dodavanja sljedećeg koda u 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

Korak 2. Nabavite tinyMCE paket

To je također prilično jednostavno: trči yarn add tinymce.

Zatim stvorite novu datoteku u koju ćemo smjestiti našu funkciju. Završio sam app/javascript/vendor/tinyMce.jssa sljedećim sadržajem:

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

Korak 3. Uvezite sve u application.js

Svoju funkciju možemo uvesti na sljedeći način:

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

a zatim ga nazovite:

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

Kao što vidite, također smo zamijenili jQuery kod s ES6.

Korak 4. Osigurajte tinyMCE kožu da radi

Ako pokrenete svoj webpack-dev-serveri rails smožda ćete se iznenaditi kad vidite da vaš uređivač teksta nije tamo. Jednim pogledom u konzolu vidjet ćete sljedeću pogrešku:

To je zato što tinyMCE neće raditi bez kože, a za njegovo uvlačenje kroz Webpack potreban je izričiti uvoz. To možemo učiniti uključivanjem ovog retka u našu tinyMce.jsdatoteku, odmah nakon ostalih izjava o uvozu. Put je u odnosu na node_modulesmapu:

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

At this point you should have your editor working.

But… if you look into the console, you might be disappointed to see that you are still getting 2 errors:

Don’t despair! There is an easy fix. Just add skin: false to your function tinyMce() config and it should do the trick. This will prevent the default files from loading.

Congrats! You just got your tinyMCE up and running!