So richten Sie TinyMCE in Ihrer Rails-App mit Webpack ein

Die Popularität der Verwendung von Webpack für den Umgang mit Ihren Assets in Rails nimmt stetig zu. Der Einstieg ist sehr einfach. Wenn Sie eine neue App starten, führen Sie sie einfach aus rails new my_app --webpackund Rails kümmert sich um den Rest.

Dank des Webpacker-Edelsteins ist das Hinzufügen von Webpack zu Ihrer vorhandenen Anwendung auch ziemlich unkompliziert. Sie fügen den Edelstein Ihrer Gemfile hinzu, bündeln ihn und installieren schließlich den Webpacker:

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

Das ist ziemlich süß. Jetzt müssen Sie nur noch Ihr JavaScript-Paket und das darin importierte CSS in den Kopf Ihres application.html.haml:

Sobald dies erledigt ist, können Sie Ihren modernen JavaScript-Code schreiben und alle großartigen Bibliotheken nutzen.

Was ist tinyMCE?

TinyMCE ist ein Rich-Text-Editor in der Cloud. Einfach ausgedrückt ist es wie Word, das in Ihre App implementiert werden kann.

Das Projekt, an dem ich arbeite, verwendet es, damit Administratoren den Inhalt der Startseite bearbeiten können. Dank TinyMCE ist es nicht erforderlich, eine separate Administrationsoberfläche für diesen Zweck zu erstellen. Die Verwendung des Editors kann jedoch viel vielseitiger sein. Denken Sie beispielsweise daran, was Sie mit Wordpress oder Evernote dank der integrierten Tools tun können.

Nutzung über CDN

Wir haben den Editor ursprünglich über CDN (z. B. Verknüpfen des Skripts im Kopf unseres application.html.haml) folgendermaßen implementiert :

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

Dies erforderte das Hinzufügen einer Datei mit unserer benutzerdefinierten Funktion in app/assets/javascript/tinyMce.js. Beachten Sie, dass wir auch jQuery verwenden.

$( 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 ] });});

Darüber hinaus mussten wir eine Übersetzungsdatei hinzufügen (was nicht erforderlich ist, wenn Sie Englisch in Ihrer App verwenden). Damit alles in der Produktion korrekt angezeigt wird, benötigen Sie außerdem einen kostenlosen Tiny Cloud-API-Schlüssel.

Webpack und tinyMCE

Ein paar Monate lang hat alles super funktioniert, aber wir haben beschlossen, dass es Zeit für den Übergang zu Webpack ist.

Webpack soll Ihnen das Leben erleichtern und in Verbindung mit Garn können Sie sich auf die wichtigen Dinge konzentrieren. Angenommen, Sie möchten Paket A verwenden. Es kommt also vor, dass Paket A auf Paket B und C basiert. Und Paket B hängt von D, E und F ab. Anstatt Stunden damit zu verbringen, herauszufinden, was die Abhängigkeiten sind, und sie alle einzeln zu installieren, was du willst sagen yarn add package-Aund es für dich herausfinden lassen. Und das ist fast der Fall.

Dieser Übergang zu tinyMCE war weitaus schmerzhafter als er hätte sein sollen. Und deshalb habe ich beschlossen, diesen Beitrag zu schreiben. Ich hoffe, es spart jemandem etwas Zeit und Frust.

Wenn Sie tinyMCE zuvor über CDN implementiert hatten, möchten Sie einige Dinge loswerden, um sauber zu beginnen. Entfernen Sie den Skriptlink von application.html.haml. Kommentieren Sie dann den Inhalt der tinyMce.jsDatei aus (und die Sprachdatei, falls Sie eine verwenden). Ich habe mich auch entschlossen, die jQuery-Abhängigkeit zu beseitigen (in unserem Fall bedeutete dies das Entfernen gem 'jquery-rails'aus der Gemfile und das app/assets/javascripts/application.jsEntfernen //= require jqueryund Ersetzen //= require jquery_ujsdurch //= require rails-ujs).

Hinweis: Gehen Sie vorsichtig vor, wenn Ihr Projekt mehr externe Bibliotheken enthält, die auf jQuery basieren (z. B. Bootstrap oder Select2). Letztendlich wäre es wahrscheinlich Ihr Ziel, alle auf Webpack zu verlagern. Je größer das Projekt, desto komplexer könnte diese Aufgabe sein. Denken Sie also daran. Nichts hindert Sie daran, Ihre traditionelle Implementierung parallel zur Webpack-Implementierung zu halten. In diesem Fall würde ich immer noch empfehlen, es für die Zeit der Implementierung von tinyMCE auskommentieren.

All diese Schritte stellen sicher, dass die Dinge, die wir von nun an implementieren, funktionieren und die alte Implementierung nicht als Fallback fungiert.

Schritt 1. Wenn Sie jQuery über das Webpack verwenden möchten

Das Hinzufügen von jQuery über Webpack ist so einfach wie das Ausführen yarn add jqueryund Hinzufügen des folgenden Codes zum 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

Schritt 2. Holen Sie sich das tinyMCE-Paket

Das ist auch ziemlich einfach: laufen yarn add tinymce.

Erstellen Sie dann eine neue Datei, in der wir unsere Funktion platzieren. Am Ende hatte ich app/javascript/vendor/tinyMce.jsfolgenden Inhalt:

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

Schritt 3. Importieren Sie alles in die application.js

Wir können unsere Funktion folgendermaßen importieren:

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

und dann nenne es:

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

Wie Sie sehen, haben wir auch den jQuery-Code durch ES6 ersetzt.

Schritt 4. Lassen Sie die tinyMCE-Haut arbeiten

Wenn Sie Ihr ausführen webpack-dev-serverund rails sSie möglicherweise überrascht sind, dass Ihr Texteditor nicht vorhanden ist. Ein Blick in die Konsole zeigt den folgenden Fehler:

Dies liegt daran, dass tinyMCE ohne Skin nicht funktioniert und das Ziehen über Webpack den expliziten Import erfordert. Wir können dies tun, indem wir diese Zeile tinyMce.jsdirekt nach den anderen Importanweisungen in unsere Datei aufnehmen. Der Pfad ist relativ zum node_modulesOrdner:

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!