Автор оригинала: FreeCodeCamp Community Member.
Джоанна Гаудин
Популярность использования WebPack для решения ваших активов в рельсах неуклонно растет. Начало работы действительно просто. Если вы начинаете новое приложение, вы просто запустите Rails New My_app --webpack И рельсы заботятся о остальных.
Благодаря WebPacker Gem Добавление WebPack в ваше существующее приложение также довольно несложно. Вы добавляете драгоценный камень на ваш драгоценный камень, пучок и, наконец, установите WebPacker:
gem 'webpacker', '~> 3.5'bundlebundle exec rails webpacker:install
Это довольно мило. Теперь все, что вам нужно сделать, это связать ваш пакет JavaScript, а CSS импортируются в него в голову вашего | application.html.haml :
<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>
Как только это сделано, вы готовы написать ваш современный код JavaScript и использовать все отличные библиотеки там.
Что такое Tinymce?
Tinymce – это богатый текстовый редактор в облаке. Чтобы просто поставить его, это как слово, которое можно реализовать в ваше приложение.
Проект, на котором я работаю, использует его, чтобы админы отредактировали содержание передней страницы. Благодаря Tinymce не нужно создавать отдельный интерфейс администратора для этой цели. Но использование редактора может быть гораздо более универсальным. Думаю, например, о том, что WordPress или Evernote позволяет вам делать благодаря их сборке в инструментах.
Использование через CDN
Первоначально мы реализовали редактор через CDN (например, связывание скрипта в начале нашего Application.html.haml ) Как это:
!!!%html %head %meta ... %title ... = csrf_meta_tags
%script{src: 'https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=gexncjni90zx3qf0m5rr7kl8l40wd5yuly2xjza0g3kwrljt'} = stylesheet_link_tag 'application', media: 'all' = javascript_include_tag 'application' %body Это требовало добавить файл с нашей индивидуальной функцией в Приложение/Активы/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 ключ Отказ
WebPack и Tinymce
Все было отлично подходит на пару месяцев, но мы решили, что пришло время для перехода к WebPack.
WebPack должен сделать вашу жизнь проще и в сочетании с пряжей, позволяет сосредоточиться на важных вещах. Скажем, вы хотите использовать пакет A. Это так бывает, что пакет A полагается на пакеты B и C. и Package B зависит от D, E и F., а не расходовые часы, выясняющие, что зависимости являются и устанавливают их все индивидуально, что Вы хотите сказать пряжа добавить пакет-а И выяснили это для вас. И это почти дело.
Этот переход, когда он пришел к Tinymce, было более болезненным, чем было. И именно поэтому я решил написать этот пост. Я надеюсь, что это экономит кому-то некоторое время и разочарование.
Если у вас ранее был Tinymce реализован через CDN Вы хотели бы избавиться от некоторых вещей, чтобы начать чистить. Удалить сценарий ссылки от application.html.haml Отказ Тогда прокомментируйте содержание Tinymce.js Файл (и файл языка, если вы используете один). Я также решил избавиться от зависимости от JQuery (в нашем случае это означало, что удаление Gem 'jQuery-Rails' от драгоценного камня, а в приложении app/actse/javascripts/application.js Удаление //= Требуется jQuery и замена //= требуется jquery_ujs с //= Требуются Rails-ujs ).
Примечание. Продолжайте осторожность Если у вас есть более внешние библиотеки в вашем проекте, который полагается на jQuery (E.g. Bootstrap или Select2). В конечном счете, ваша цель, вероятно, будет двигать всеми из них в Убен, но и чем больше проекта, тем более сложным, что задача может быть, поэтому просто имейте в виду. Ничто не останавливает вас от того, чтобы сохранить вашу традиционную реализацию параллельно с помощью WebPack One. В этом случае я все равно рекомендую комментировать его на время реализации Tinymce.
Все эти шаги гарантируют, что вещи, которые мы будем реализовать от работы на работе, а старая реализация не функционирует как отставание.
Шаг 1. Если вы хотите использовать jQuery через WebPack
Добавление jQuery через WebPack так же просто, как работает пряжа Добавить jquery и добавление следующего кода для config/webpack/enducial.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
Это также довольно просто: беги пряжа Добавить Tinymce Отказ
Затем создайте новый файл, где мы разместим нашу функцию. Я закончил Приложение/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
Мы можем импортировать нашу функцию, как:
Импорт {Tinymce} из “../vendor/tinymce”;
а затем назовите это:
document.addEventListener("turbolinks:load", function () { tinyMce(); });Как видите, мы также заменили код jQuery с ES6.
Шаг 4. Получить кожу Tinymce для работы
Если вы запустите свой WebPack-Dev-Server и рельсы S Вы можете быть удивлены, увидев, что ваш текстовый редактор там нет. Один взгляд в консоли, и вы увидите следующую ошибку:
Это потому, что Tinymce не будет работать без кожи, и потянув ее через WebPack, требует его явного импорта. Мы можем сделать это, включая эту линию в нашем Tinymce.js Файл сразу после других операторов импорта. Путь относительно node_modules папка:
import 'tinymce/skins/lightgray/skin.min.css';
На этом этапе вы должны работать ваш редактор.
Но … если вы посмотрите в консоль, вы можете быть разочарованы, чтобы увидеть, что вы все еще получаете 2 ошибки:
Не отчаясь! Есть простое исправление. Просто добавьте Кожа: ложь к вашему Функция Tinymce () config и это должно сделать трюк. Это предотвратит загрузку файлов по умолчанию.
Поздравляю! Вы только что получили вашу цепляться вверх и бега!