كيفية إعداد TinyMCE في تطبيق Rails الخاص بك باستخدام Webpack

تزداد شعبية استخدام Webpack للتعامل مع أصولك في ريلز باطراد. الشروع في العمل مباشر حقًا. إذا كنت تبدأ تطبيقًا جديدًا ، rails new my_app --webpackفما عليك سوى تشغيله وسيهتم ريلز بالباقي.

بفضل جوهرة 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 ] });});

بالإضافة إلى ذلك ، كان علينا تضمين ملف ترجمة (وهو ليس ضروريًا إذا كنت تستخدم اللغة الإنجليزية في تطبيقك). لعرض كل شيء بشكل صحيح في الإنتاج ، ستحتاج أيضًا إلى الحصول على مفتاح Tiny Cloud API مجاني.

Webpack و tinyMCE

كان كل شيء يعمل بشكل رائع لمدة شهرين ، لكننا قررنا أن الوقت قد حان للانتقال نحو Webpack.

من المفترض أن يجعل Webpack حياتك أسهل ، إلى جانب الغزل ، يتيح لك التركيز على الأشياء المهمة. لنفترض أنك تريد استخدام الحزمة أ. يحدث ذلك ، تعتمد الحزمة أ على الحزمتين B و C. وتعتمد الحزمة B على D و E و F. بدلاً من قضاء ساعات في معرفة ماهية التبعيات وتثبيتها جميعًا بشكل فردي ، ماذا الذي تريده هو أن تقول yarn add package-A، وقد حللت الأمر من أجلك. وهذا هو الحال تقريبا .

كان هذا الانتقال عندما يتعلق الأمر بـ tinyMCE أكثر إيلاما مما كان ينبغي أن يكون. ولهذا قررت أن أكتب هذا المنشور. آمل أن يوفر على شخص ما بعض الوقت والإحباط.

إذا سبق لك تنفيذ tinyMCE عبر CDN ، فأنت ترغب في التخلص من بعض الأشياء لبدء التنظيف. قم بإزالة ارتباط البرنامج النصي من application.html.haml. ثم قم بالتعليق على محتوى tinyMce.jsالملف (وملف اللغة إذا كنت تستخدم أحدهما). وقررت أيضا للتخلص من التبعية مسج (في حالتنا يعني إزالة gem 'jquery-rails'من Gemfile، وفي app/assets/javascripts/application.jsإزالة //= require jqueryواستبدال //= require jquery_ujsمع //= require rails-ujs).

ملاحظة: تابع بحذر إذا كان لديك المزيد من المكتبات الخارجية في مشروعك التي تعتمد على jQuery (مثل Bootstrap أو Select2). في النهاية ، قد يكون هدفك هو نقلهم جميعًا إلى Webpack ، ولكن كلما كان المشروع أكبر ، زادت تعقيد هذه المهمة ، لذا ضعها في اعتبارك. لا شيء يمنعك من الحفاظ على توازي تنفيذك التقليدي مع Webpack واحد. في هذه الحالة ، ما زلت أوصي بالتعليق عليها في وقت تنفيذ tinyMCE.

ستضمن كل هذه الخطوات أن الأشياء التي سننفذها من الآن فصاعدًا ستعمل ، ولن يعمل التطبيق القديم كبديل.

الخطوة الأولى: إذا كنت تريد استخدام 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كنت قد يفاجأ أن نرى أن محرر النصوص ليست هناك. نظرة واحدة في وحدة التحكم وسترى الخطأ التالي:

هذا لأن tinyMCE لن تعمل بدون الجلد ، وسحبها عبر Webpack يتطلب استيرادها الصريح. يمكننا القيام بذلك عن طريق تضمين هذا السطر في tinyMce.jsملفنا ، مباشرة بعد عبارات الاستيراد الأخرى. المسار متعلق node_modulesبالمجلد:

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

في هذه المرحلة ، يجب أن يعمل محررك.

ولكن ... إذا نظرت إلى وحدة التحكم ، فقد تشعر بخيبة أمل لرؤية أنك لا تزال تتلقى خطأين:

لا تيأس! هناك حل سهل. فقط أضف skin: falseإلى function tinyMce()التكوين الخاص بك ويجب أن تفعل الحيلة. سيؤدي هذا إلى منع تحميل الملفات الافتراضية.

مبروك! لقد حصلت للتو على tinyMCE وتشغيلها!