Как настроить TinyMCE в вашем приложении Rails с помощью Webpack

1656535214 kak nastroit tinymce v vashem prilozhenii rails s pomoshhyu webpack

от Джоанны Годин

1*5d_eDFKTmlTdYafG9dahdw

Популярность использования 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_pack_tag 'application' %> <!-- js from app/javascript/packs/application.js -->
<%= stylesheet_pack_tag 'application' %> <!-- CSS imported via Wbpack -->

Как только это будет сделано, вы готовы написать свой современный код JavaScript и использовать все замечательные библиотеки.

Что такое tinyMCE?

TinyMCE – это расширенный текстовый редактор в облаке. Проще говоря, это как Word, который можно внедрить в программу.

Проект, над которым я работаю, использует его, чтобы разрешить администраторам редактировать содержимое главной страницы. Благодаря TinyMCE для этой цели не нужно создавать отдельный интерфейс администратора. Но использование редактора может быть гораздо более универсальным. Подумайте, например, что WordPress или Evernote позволяет вам производить благодаря встроенным инструментам.

1*lUWdaoq0bkq3vDCrlzn4zQ
Пример использования TinyMCE. Власть сейчас в руках пользователя.

Использование через CDN

Сначала мы реализовали редактор через CDN (например, связав скрипт в голове нашего application.html.haml) нравится это:

!!!%html  %head    %meta ... <!-- some meta content -->    %title ... <!-- MyApp -->    = csrf_meta_tags
    %script{src: '    = stylesheet_link_tag 'application', media: 'all'    = javascript_include_tag 'application'  %body    <!-- the usual body stuff -->

Для этого нужно было добавить файл с нашей настроенной функцией 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 через 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. Запустите кожу tinyMCE

Если вы запускаете свой webpack-dev-server и rails s вы можете быть удивлены, увидев, что текстового редактора нет. Один взгляд на консоль, и вы увидите такую ​​ошибку:

1*fCntK4ZDJtVxvGobG4V0oA

Это связано с тем, что tinyMCE не будет работать без скина, а для его привлечения через Webpack требуется его явный импорт. Мы можем сделать это, включив эту строку в нашу tinyMce.js файл сразу после других операторов импорта. Путь относительно node_modules папка:

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

На этом этапе у вас должен работать редактор.

Но… если вы заглянете в консоль, вы можете быть разочарованы, увидев, что все еще получаете 2 ошибки:

1*uOpqUB3N2qAIzuDH1zRNOw

Не отчаивайтесь! Есть простое решение. Просто добавьте skin: false твоему function tinyMce() config и это должно сделать свое дело. Это предотвратит загрузку файлов по умолчанию.

Поздравляю! Вы только что запустили свой крошечный MCE!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *