Acest tutorial pas cu pas vă arată cum am configurat CKEditor cu Ruby on Rails 5 pentru proiectul meu For A Piece, un job board pentru programatori care caută companii care oferă capital.

Pasul 1. Adăugați ckeditor la Gemfile

gem 'ckeditor'

Pasul 2. Adăugați ckeditor/config.js la config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( stripe.css ckeditor/config.js )

Pasul 3. Configurați inițializatorul pentru a porni ckeditor în config/initializers/ckeditor.rb

Poate exista o versiune ckeditor mai nouă decât 4.6.1. „Verificați aici” pentru actualizări de versiune

Ckeditor.setup do |config| config.cdn_url = "//cdn.ckeditor.com/4.6.1/basic/ckeditor.js" end

Pasul 4. app/views/layouts/application.html.erb

Aș fi putut adăuga eticheta javascript direct aici, dar vreau să încarc fișierul javascript NUMAI pentru pagina pe care utilizează CKEditor.

<head> <%= yield(:ckeditor_form) if content_for?(:ckeditor_form) %> </head>

Pasul 5. app/views/jobs/new.html.erb

Adaug conținutul_pentru în partea de sus a fișierului. Dacă îl adăugați în partea de jos, este posibil să observați că Javascript nu se încarcă înainte ca conținutul să provoace o rupere. În acest moment, încă nu va funcționa până când vom adăuga JS.

<% content_for :ckeditor_form do %> <%= javascript_include_tag Ckeditor.cdn_url %> <% end %> <div class="form-group"> <%= label_tag(:description, "Job Description") %><i class="fa fa-asterisk">Required</i> <%= f.cktext_area :description, cols: 40, ckeditor: { uiColor: '#AADC6E' }, class: 'text form-control', required: true %> </div>

Pasul 6. app/assets/javascripts/ckeditor/config.js

Ultimul pas înainte ca editorul nostru să înceapă să lucreze! CKEditor este foarte configurabil. Această configurație curentă afișează numai liste aldine, cursive, legături și cu marcatori. Dacă doriți să configurați în continuare editorul, consultați „alte opțiuni”!

if (typeof(CKEDITOR) != 'undefined') { CKEDITOR.editorConfig = function( config ) { config.toolbar = 'MyToolbar' config.toolbar_MyToolbar = [ { name: 'basicstyles', items : [ 'Bold','Italic' ] }, { name: 'links', items : [ 'Link','Unlink' ] }, { name: 'paragraph', items : [ 'BulletedList' ] }, ]; config.height = '143px'; config.width = '100%'; config.enterMode = CKEDITOR.ENTER_BR; config.shiftEnterMode = CKEDITOR.ENTER_BR; config.autoParagraph = false; } }

Vă mulțumim pentru citit! Cu aceste actualizări, ar trebui să aveți un editor de text care să le permită utilizatorilor să facă mai mult! Gata cu câmpurile de text simplu. Dacă aveți succes sau probleme cu acest tutorial, vă rugăm să lăsați un comentariu și să-mi spuneți!

Dacă sunteți în căutarea unui nou loc de muncă de programare de la distanță care să ofere echitate, vizionați „For A Piece”, este gratuit! De asemenea, puteți verifica cum îl folosesc pe pagina nouă de locuri de muncă.

Noroc!
John Moon

Publicat inițial la https://thinkandgrowentrepreneur.com pe 11 februarie 2020.