Ten samouczek pokazuje krok po kroku, jak skonfigurowałem CKEditor z Ruby on Rails 5 dla mojego projektu „For A Piece”, tablicy ogłoszeń dla programistów poszukujących firm oferujących kapitał własny.

Krok 1. Dodaj ckeditor do Gemfile

gem 'ckeditor'

Krok 2. Dodaj plik ckeditor/config.js do config/initializers/assets.rb

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

Krok 3. Skonfiguruj inicjator, aby uruchomić ckeditor w config/initializers/ckeditor.rb

Może istnieć nowsza wersja ckeditora niż 4.6.1. Sprawdź tutaj, aby uzyskać aktualizacje wersji

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

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

Mógłbym dodać tag javascript bezpośrednio tutaj, ale chcę załadować plik javascript TYLKO dla strony, która korzysta z CKEditora.

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

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

Dodaję content_for na górze pliku. Jeśli dodasz go na dole, może się zdarzyć, że JavaScript nie zostanie załadowany przed treścią powodującą uszkodzenie. W tym momencie to nadal nie będzie działać, dopóki nie dodamy 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>

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

Ostatni krok zanim nasz edytor zacznie działać! CKEditor jest wysoce konfigurowalny. W tej bieżącej konfiguracji wyświetlane są tylko listy pogrubione, kursywa, łącza i listy wypunktowane. Jeśli chcesz dalej skonfigurować swój edytor, sprawdź inne opcje!

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; } }

Dziękuję za przeczytanie! Dzięki tym aktualizacjom powinieneś mieć świetny edytor tekstu, który pozwoli użytkownikom zrobić więcej! Nigdy więcej zwykłych pól tekstowych. Jeśli odniesiesz sukces lub problemy z tym samouczkiem, zostaw komentarz i daj mi znać!

Jeśli szukasz nowej pracy w zakresie programowania zdalnego, oferującej kapitał własny, przyjdź do kasy „Za sztukę”, to nic nie kosztuje! Możesz także sprawdzić, jak z niego korzystam, na nowej stronie z ofertami pracy.

Pozdrawiam!
John Moon

Oryginalnie opublikowano na stronie „https://thinkandgrowentrepreneur.com” 11 lutego 2020 r.