Як налаштувати 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 - це текстовий редактор у хмарі. Простіше кажучи, це як 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 ] });});

Окрім цього, нам довелося включити файл перекладу (що не обов’язково, якщо ви використовуєте англійську мову у своєму додатку). Щоб все правильно відображалося у виробництві, вам також потрібно буде отримати безкоштовний ключ API Tiny Cloud.

Webpack та tinyMCE

Протягом декількох місяців все працювало чудово, але ми вирішили, що настав час переходу до Webpack.

Webpack повинен зробити ваше життя простішим, а разом із пряжею дозволяє зосередитись на важливих речах. Скажімо, ви хочете використовувати пакет A. Так трапляється, що пакет A покладається на пакети B і C. А пакет B залежить від 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. У такому випадку я все одно рекомендую прокоментувати це на час впровадження tinyMCE.

Усі ці кроки гарантуватимуть, що речі, які ми будемо реалізовувати відтепер, працюватимуть, а стара реалізація не функціонує як резервна.

Крок 1. Якщо ви хочете використовувати jQuery через веб-пакет

Додавання 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. Примушуйте шкіру tinyMCE працювати

Якщо ви запустите свій, webpack-dev-serverі rails sможете здивуватися, побачивши, що вашого текстового редактора немає. Заглянувши в консоль, ви побачите таку помилку:

Це пов’язано з тим, що tinyMCE не буде працювати без обшивки, і втягування її через Webpack вимагає явного імпорту. Ми можемо зробити це, включивши цей рядок у наш tinyMce.jsфайл, одразу після інших операторів імпорту. Шлях відносно node_modulesпапки:

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!