Ushbu bosqichma-bosqich o'quv qo'llanma mening "For A Piece" loyiham uchun Ruby on Rails 5 bilan CKEditor-ni qanday o'rnatishimni ko'rsatadi, bu o'z kapitalini taklif qiladigan kompaniyalarni qidirayotgan dasturchilar uchun ish kengashi.
1-qadam. Gemfile-ga ckeditor qo'shing
gem 'ckeditor'
2-qadam. config/initializers/assets.rb ga ckeditor/config.js qo‘shing
Rails.application.config.assets.precompile += %w( stripe.css ckeditor/config.js )
3-qadam. Config/initializers/ckeditor.rb sahifasida ckeditorni ishga tushirish uchun initsializatorni sozlang.
4.6.1 dan yangiroq ckeditor versiyasi bo'lishi mumkin. Versiyani yangilash uchun "bu erda tekshiring"
Ckeditor.setup do |config| config.cdn_url = "//cdn.ckeditor.com/4.6.1/basic/ckeditor.js" end
4-qadam. app/views/layouts/application.html.erb
Men javascript yorlig'ini to'g'ridan-to'g'ri bu erga qo'shishim mumkin edi, lekin men JavaScript faylini FAQAT CKEditor-dan foydalanadigan sahifaga yuklamoqchiman.
<head> <%= yield(:ckeditor_form) if content_for?(:ckeditor_form) %> </head>
5-qadam. app/views/jobs/new.html.erb
Men faylning yuqori qismidagi content_for ni qo'shaman. Agar siz uni pastki qismga qo'shsangiz, Javascript kontentdan oldin yuklanmasligi va buzilishiga olib kelishi mumkin. Hozirda biz JS qo'shmagunimizcha u ishlamaydi.
<% 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>
6-qadam. app/assets/javascripts/ckeditor/config.js
Muharririmiz ish boshlashidan oldingi oxirgi qadam! CKEditor juda sozlanishi. Ushbu joriy sozlash faqat qalin, kursiv, havolalar va markirovka qilingan roʻyxatlarni koʻrsatadi. Agar siz muharriringizni qo'shimcha sozlashni istasangiz, "boshqa variantlarni" tekshiring!
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; } }
O'qiganingiz uchun tashakkur! Ushbu yangilanishlar bilan siz foydalanuvchilarga ko'proq narsani qilish imkonini beruvchi kickass matn muharririga ega bo'lishingiz kerak! Endi oddiy matn maydonlari yo'q. Agar siz ushbu qo'llanmada muvaffaqiyatga erishsangiz yoki muammoga duch kelsangiz, sharh qoldiring va menga xabar bering!
Agar siz yangi masofaviy dasturlash ishini izlayotgan bo'lsangiz, "Bir parcha uchun" pul mablag'larini taklif eting, bu bepul! Bundan qanday foydalanishimni yangi ish sahifasida ham tekshirishingiz mumkin.
Salom!
Jon Mun
Dastlab 2020-yil 11-fevralda “https://thinkandgrownentrepreneur.com” saytida chop etilgan.
