Πώς να ρυθμίσετε το TinyMCE στην εφαρμογή Rails χρησιμοποιώντας το Webpack

Η δημοτικότητα της χρήσης του Webpack για τη διαχείριση των στοιχείων σας στο Rails αυξάνεται σταθερά. Το ξεκίνημα είναι πραγματικά απλό. Εάν ξεκινάτε μια νέα εφαρμογή, απλά τρέχετε rails new my_app --webpackκαι το Rails αναλαμβάνει τα υπόλοιπα.

Χάρη στο κόσμημα webpacker, η προσθήκη του Webpack στην υπάρχουσα εφαρμογή σας είναι επίσης αρκετά απλή. Προσθέτετε το στολίδι στο Gemfile, το πακέτο και, τέλος, εγκαταστήστε το webpacker:

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

Αυτό είναι πολύ γλυκό. Τώρα το μόνο που χρειάζεται να κάνετε είναι να συνδέσετε το πακέτο JavaScript και το CSS που εισάγεται σε αυτό στο κεφάλι του application.html.haml:

Μόλις γίνει αυτό, είστε έτοιμοι να γράψετε τον σύγχρονο κώδικα JavaScript και να χρησιμοποιήσετε όλες τις υπέροχες βιβλιοθήκες εκεί έξω.

Τι είναι το tinyMCE;

Το TinyMCE είναι ένα πρόγραμμα επεξεργασίας εμπλουτισμένου κειμένου στο cloud. Με απλά λόγια, είναι σαν το Word που μπορεί να εφαρμοστεί στην εφαρμογή σας.

Το έργο στο οποίο εργάζομαι το χρησιμοποιεί για να επιτρέψει στους διαχειριστές να επεξεργαστούν το περιεχόμενο της πρώτης σελίδας. Χάρη στο TinyMCE, δεν είναι απαραίτητο να δημιουργήσετε μια ξεχωριστή διεπαφή διαχειριστή για το σκοπό αυτό. Αλλά η χρήση του συντάκτη μπορεί να είναι πολύ πιο ευέλικτη. Σκεφτείτε, για παράδειγμα, τι σας επιτρέπει το Wordpress ή το Evernote να κάνετε χάρη στα ενσωματωμένα εργαλεία τους.

Χρήση μέσω CDN

Αρχικά εφαρμόσαμε τον επεξεργαστή μέσω CDN (π.χ. συνδέοντας το σενάριο στο κεφάλι μας application.html.haml) ως εξής:

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

Αυτό απαιτούσε την προσθήκη ενός αρχείου με την προσαρμοσμένη λειτουργία μας στο app/assets/javascript/tinyMce.js. Σημειώστε ότι χρησιμοποιούμε επίσης το 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 ] });});

Εκτός από αυτό, έπρεπε να συμπεριλάβουμε ένα αρχείο μετάφρασης (το οποίο δεν είναι απαραίτητο εάν χρησιμοποιείτε αγγλικά στην εφαρμογή σας). Για να εμφανίζονται όλα σωστά στην παραγωγή, θα πρέπει επίσης να λάβετε ένα δωρεάν κλειδί Tiny Cloud API.

Webpack και tinyMCE

Όλα λειτουργούσαν υπέροχα για μερικούς μήνες, αλλά αποφασίσαμε ότι ήρθε η ώρα για τη μετάβαση προς το Webpack.

Το Webpack υποτίθεται ότι θα κάνει τη ζωή σας πιο εύκολη και, σε συνδυασμό με νήματα, σας επιτρέπει να επικεντρωθείτε στα σημαντικά πράγματα. Ας πούμε ότι θέλετε να χρησιμοποιήσετε το πακέτο A. Αυτό συμβαίνει, ότι το πακέτο Α βασίζεται στα πακέτα B και C. Και το πακέτο Β εξαρτάται από τα D, E και F. θέλετε να πείτε yarn add package-Aκαι να το καταλάβετε. Και αυτό συμβαίνει σχεδόν .

Αυτή η μετάβαση όταν ήρθε στο tinyMCE ήταν πολύ πιο οδυνηρή από την κανονική. Και γι 'αυτό αποφάσισα να γράψω αυτήν την ανάρτηση. Ελπίζω να σώσει κάποιον χρόνο και απογοήτευση.

Εάν στο παρελθόν είχατε υλοποιήσει το tinyMCE μέσω CDN , θα θέλατε να απαλλαγείτε από κάποια πράγματα, για να ξεκινήσετε καθαρά. Καταργήστε το σύνδεσμο σεναρίου από application.html.haml. Στη συνέχεια, σχολιάστε το περιεχόμενο του tinyMce.jsαρχείου (και το αρχείο γλώσσας εάν χρησιμοποιείτε ένα). Αποφάσισα επίσης να απαλλαγώ από την εξάρτηση jQuery (στην περίπτωσή μας σήμαινε αφαίρεση gem 'jquery-rails'από το Gemfile και στην app/assets/javascripts/application.jsαφαίρεση //= require jqueryκαι αντικατάσταση //= require jquery_ujsμε //= require rails-ujs)

Σημείωση: Συνεχίστε με προσοχή εάν έχετε περισσότερες εξωτερικές βιβλιοθήκες στο έργο σας που βασίζονται στο jQuery (π.χ. Bootstrap ή Select2). Τελικά ο στόχος σας θα ήταν πιθανότατα να μετακινήσετε όλα αυτά στο Webpack, αλλά όσο μεγαλύτερο είναι το έργο, τόσο πιο περίπλοκο θα μπορούσε να είναι αυτό το έργο, οπότε απλώς το έχετε κατά νου. Τίποτα δεν σας εμποδίζει να διατηρήσετε την παραδοσιακή εφαρμογή σας παράλληλη με αυτήν του Webpack Σε αυτήν την περίπτωση, θα συνιστούσα να το σχολιάσω για την περίοδο εφαρμογής του smallMCE.

Όλα αυτά τα βήματα θα διασφαλίσουν ότι τα πράγματα που θα εφαρμόσουμε από τώρα και στο εξής στη δουλειά και η παλιά εφαρμογή δεν θα λειτουργεί ως εναλλακτική λύση.

Βήμα 1. Εάν θέλετε να χρησιμοποιήσετε το jQuery μέσω webpack

Η προσθήκη του jQuery μέσω του Webpack είναι τόσο απλή όσο η εκτέλεση yarn add jqueryκαι η προσθήκη του ακόλουθου κώδικα στο 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

Βήμα 2. Αποκτήστε το πακέτο tinyMCE

Αυτό είναι επίσης πολύ απλό: τρέξτε yarn add tinymce.

Στη συνέχεια, δημιουργήστε ένα νέο αρχείο όπου θα τοποθετήσουμε τη λειτουργία μας. Κατέληξα app/javascript/vendor/tinyMce.jsμε το ακόλουθο περιεχόμενο:

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

Βήμα 3. Εισαγάγετε τα πάντα στο application.js

Μπορούμε να εισαγάγουμε τη λειτουργία μας έτσι:

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

και μετά καλέστε το:

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

Όπως μπορείτε να δείτε, αντικαταστήσαμε επίσης τον κώδικα jQuery με ES6.

Βήμα 4. Λειτουργήστε το μικροσκοπικό δέρμα

Εάν εκτελέσετε το δικό σας webpack-dev-serverκαι rails sίσως εκπλαγείτε να δείτε ότι το πρόγραμμα επεξεργασίας κειμένου σας δεν είναι εκεί. Μία ματιά στην κονσόλα και θα δείτε το ακόλουθο σφάλμα:

Αυτό συμβαίνει επειδή το tinyMCE δεν θα λειτουργήσει χωρίς δέρμα και για να το τραβήξετε μέσω του Webpack απαιτείται η ρητή εισαγωγή του. Μπορούμε να το κάνουμε αυτό συμπεριλαμβάνοντας αυτή τη γραμμή στο tinyMce.jsαρχείο μας , αμέσως μετά τις άλλες δηλώσεις εισαγωγής. Η διαδρομή σχετίζεται με το node_modulesφάκελο:

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

Σε αυτό το σημείο πρέπει να έχετε τον επεξεργαστή σας σε λειτουργία.

Αλλά… αν κοιτάξετε την κονσόλα, μπορεί να απογοητευτείτε να δείτε ότι εξακολουθείτε να λαμβάνετε 2 σφάλματα:

Μην απελπίζεστε! Υπάρχει μια εύκολη λύση. Απλώς προσθέστε skin: falseστη function tinyMce()διαμόρφωση σας και θα πρέπει να κάνει το κόλπο. Αυτό θα αποτρέψει τη φόρτωση των προεπιλεγμένων αρχείων.

Συγχαρητήρια! Μόλις ενεργοποιήσατε το tinyMCE σας!