В этом пошаговом руководстве показано, как я настроил CKEditor с Ruby on Rails 5 для своего проекта For A Piece, доски объявлений для программистов, которые ищут компании, предлагающие акции.
Шаг 1. Добавить ckeditor в Gemfile
gem 'ckeditor'
Шаг 2. Добавьте ckeditor/config.js в config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( stripe.css ckeditor/config.js )
Шаг 3. Настройте инициализатор для запуска ckeditor в config/initializers/ckeditor.rb.
Может быть более новая версия ckeditor, чем 4.6.1. Отметьте здесь для обновления версии
Ckeditor.setup do |config| config.cdn_url = "//cdn.ckeditor.com/4.6.1/basic/ckeditor.js" end
Шаг 4. app/views/layouts/application.html.erb
Я мог бы добавить тег javascript прямо здесь, но я хочу загрузить файл javascript ТОЛЬКО для страницы, на которой используется CKEditor.
<head> <%= yield(:ckeditor_form) if content_for?(:ckeditor_form) %> </head>
Шаг 5. app/views/jobs/new.html.erb
Я добавляю content_for вверху файла. Если вы добавите его внизу, вы можете столкнуться с тем, что Javascript не загружается до того, как содержимое приведет к поломке. На данный момент это все еще не будет работать, пока мы не добавим 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>
Шаг 6. app/assets/javascripts/ckeditor/config.js
Последний шаг перед тем, как наш редактор начнет работать! CKEditor легко настраивается. Эта текущая настройка отображает только полужирный шрифт, курсив, ссылки и маркированные списки. Если вы хотите дополнительно настроить свой редактор, ознакомьтесь с другими опциями!
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; } }
Спасибо за чтение! С этими обновлениями у вас должен быть офигенный текстовый редактор, который позволит вашим пользователям делать больше! Нет больше простых текстовых полей. Если у вас есть успех или проблемы с этим уроком, пожалуйста, оставьте комментарий и дайте мне знать!
Если вы ищете новую работу по удаленному программированию, которая предлагает капитал, зайдите в For A Piece, это бесплатно! Вы также можете проверить, как я его использую, на новой странице вакансий.
Ура!
Джон Мун
Первоначально опубликовано на https://thinkandgrowentrepreneur.com 11 февраля 2020 г.
