add ckeditor to project text fields

Gemfile

@@ -31,6 +31,8 @@ gem 'cocoon'
 gem 'friendly_id'
 gem 'globalize'
 gem 'globalize-accessors'
+gem 'ckeditor', '~> 4.3'
+gem 'mini_magick'
 
 group :development, :test do
   gem 'byebug', platform: :mri

Gemfile.lock

@@ -77,6 +77,10 @@ GEM
       image_processing (~> 1.1)
       mimemagic (>= 0.3.0)
       mini_mime (>= 0.1.3)
+    ckeditor (4.3.0)
+      orm_adapter (~> 0.5.0)
+      terrapin
+    climate_control (0.2.0)
     cocoon (1.2.14)
     coffee-rails (4.2.2)
       coffee-script (>= 2.2.0)
@@ -271,6 +275,8 @@ GEM
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
     temple (0.8.1)
+    terrapin (0.6.0)
+      climate_control (>= 0.0.3, < 1.0)
     thor (0.20.3)
     thread_safe (0.3.6)
     tilt (2.0.9)
@@ -302,6 +308,7 @@ DEPENDENCIES
   byebug
   cancancan
   carrierwave
+  ckeditor (~> 4.3)
   cocoon
   coffee-rails (~> 4.2)
   devise
@@ -313,6 +320,7 @@ DEPENDENCIES
   jbuilder (~> 2.5)
   jquery-rails
   listen (~> 3.0.5)
+  mini_magick
   mysql2 (>= 0.3.18, < 0.6.0)
   omniauth
   omniauth-facebook

app/admin/projects.rb

@@ -78,10 +78,10 @@ ActiveAdmin.register Project do
       f.input :slug, label: "#{t "active_admin.attributes.project.slug"}"
       f.input :heading_uk, label: "#{t "active_admin.attributes.project.heading_uk"}"
       f.input :heading_en, label: "#{t "active_admin.attributes.project.heading_en"}"
-      f.input :short_description_uk, label: "#{t "active_admin.attributes.project.short_description_uk"}"
-      f.input :short_description_en, label: "#{t "active_admin.attributes.project.short_description_en"}"
-      f.input :description_uk, label: "#{t "active_admin.attributes.project.description_uk"}"
-      f.input :description_en, label: "#{t "active_admin.attributes.project.description_en"}"
+      f.input :short_description_uk, as: :ckeditor, input_html: { ckeditor: { height: 400 } }, label: "#{t "active_admin.attributes.project.short_description_uk"}"
+      f.input :short_description_en, as: :ckeditor, input_html: { ckeditor: { height: 400 } }, label: "#{t "active_admin.attributes.project.short_description_en"}"
+      f.input :description_uk, as: :ckeditor, input_html: { ckeditor: { height: 400 } }, label: "#{t "active_admin.attributes.project.description_uk"}"
+      f.input :description_en, as: :ckeditor, input_html: { ckeditor: { height: 400 } }, label: "#{t "active_admin.attributes.project.description_en"}"
       f.input :site, label: "#{t "active_admin.attributes.project.site"}"
       f.input :link_to_facebook, label: "#{t "active_admin.attributes.project.link_to_facebook"}"
       f.input :required_amount, label: "#{t "active_admin.attributes.project.required_amount"}"
@@ -97,14 +97,14 @@ ActiveAdmin.register Project do
         project_galaries_form.input :_destroy, as: :boolean, label: "#{t "active_admin.attributes.project._destroy"}"
       end
       f.has_many :project_qoutes, heading: false, new_record: true do |project_qoutes_form|
-        project_qoutes_form.input :text_over_quote_uk, label: "#{t "active_admin.attributes.project_qoutes.text_over_quote_uk"}"
-        project_qoutes_form.input :text_over_quote_en, label: "#{t "active_admin.attributes.project_qoutes.text_over_quote_en"}"
+        project_qoutes_form.input :text_over_quote_uk, as: :ckeditor, input_html: { ckeditor: { height: 400 } }, label: "#{t "active_admin.attributes.project_qoutes.text_over_quote_uk"}"
+        project_qoutes_form.input :text_over_quote_en, as: :ckeditor, input_html: { ckeditor: { height: 400 } }, label: "#{t "active_admin.attributes.project_qoutes.text_over_quote_en"}"
         project_qoutes_form.input :background_color_quote_text, input_html: { class: 'colorpicker' }, label: "#{t "active_admin.attributes.project_qoutes.background_color_quote_text"}"
         project_qoutes_form.input :icon, label: "#{t "active_admin.attributes.project_qoutes.icon"}"
-        project_qoutes_form.input :text_quote_uk, label: "#{t "active_admin.attributes.project_qoutes.text_quote_uk"}"
-        project_qoutes_form.input :text_quote, label: "#{t "active_admin.attributes.project_qoutes.text_quote"}"
-        project_qoutes_form.input :text_below_quote_uk, label: "#{t "active_admin.attributes.project_qoutes.text_below_quote_uk"}"
-        project_qoutes_form.input :text_below_quote, label: "#{t "active_admin.attributes.project_qoutes.text_below_quote"}"
+        project_qoutes_form.input :text_quote_uk, as: :ckeditor, input_html: { ckeditor: { height: 400 } }, label: "#{t "active_admin.attributes.project_qoutes.text_quote_uk"}"
+        project_qoutes_form.input :text_quote, as: :ckeditor, input_html: { ckeditor: { height: 400 } }, label: "#{t "active_admin.attributes.project_qoutes.text_quote"}"
+        project_qoutes_form.input :text_below_quote_uk, as: :ckeditor, input_html: { ckeditor: { height: 400 } }, label: "#{t "active_admin.attributes.project_qoutes.text_below_quote_uk"}"
+        project_qoutes_form.input :text_below_quote, as: :ckeditor, input_html: { ckeditor: { height: 400 } }, label: "#{t "active_admin.attributes.project_qoutes.text_below_quote"}"
         project_qoutes_form.input :_destroy, as: :boolean, label: "#{t "active_admin.attributes.project._destroy"}"
       end
       f.has_many :project_photos, heading: false, new_record: true do |project_photos_form|
@@ -127,12 +127,12 @@ ActiveAdmin.register Project do
         project_documents_form.input :_destroy, as: :boolean, label: "#{t "active_admin.attributes.project._destroy"}"
       end
       f.has_many :project_videos, heading: false, new_record: true do |project_videos_form|
-        project_videos_form.input :short_description_uk, label: "#{t "active_admin.attributes.project_videos.short_description_uk"}"
-        project_videos_form.input :short_description_en, label: "#{t "active_admin.attributes.project_videos.short_description_en"}"
+        project_videos_form.input :short_description_uk, as: :ckeditor, input_html: { ckeditor: { height: 400 } }, label: "#{t "active_admin.attributes.project_videos.short_description_uk"}"
+        project_videos_form.input :short_description_en, as: :ckeditor, input_html: { ckeditor: { height: 400 } }, label: "#{t "active_admin.attributes.project_videos.short_description_en"}"
         project_videos_form.input :video_file, label: "#{t "active_admin.attributes.project_videos.video_file"}"
         project_videos_form.input :video_link, label: "#{t "active_admin.attributes.project_videos.video_link"}"
-        project_videos_form.input :description_uk, label: "#{t "active_admin.attributes.project_videos.description_uk"}"
-        project_videos_form.input :description_en, label: "#{t "active_admin.attributes.project_videos.description_en"}"
+        project_videos_form.input :description_uk, as: :ckeditor, input_html: { ckeditor: { height: 400 } }, label: "#{t "active_admin.attributes.project_videos.description_uk"}"
+        project_videos_form.input :description_en, as: :ckeditor, input_html: { ckeditor: { height: 400 } }, label: "#{t "active_admin.attributes.project_videos.description_en"}"
         project_videos_form.input :_destroy, as: :boolean, label: "#{t "active_admin.attributes.project._destroy"}"
       end
     end

app/assets/javascripts/active_admin.js

 //= require active_admin/base
+//= require ckeditor/init

app/assets/javascripts/application.js

@@ -26,5 +26,6 @@
 //= require jquery.autocomplete
 //= require gmaps/google
 //= require squares
+//= require ckeditor/init
 //= require_tree .
 

app/assets/javascripts/ckeditor/config.js

+CKEDITOR.editorConfig = function( config ) {
+  config.language = 'en';
+  config.uiColor = '#ffffff';
+  /* Filebrowser routes */
+  // The location of an external file browser, that should be launched when "Browse Server" button is pressed.
+  config.filebrowserBrowseUrl = "/ckeditor/attachment_files";
+  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Flash dialog.
+  config.filebrowserFlashBrowseUrl = "/ckeditor/attachment_files";
+  // The location of a script that handles file uploads in the Flash dialog.
+  config.filebrowserFlashUploadUrl = "/ckeditor/attachment_files";
+  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Link tab of Image dialog.
+  config.filebrowserImageBrowseLinkUrl = "/ckeditor/pictures";
+  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Image dialog.
+  config.filebrowserImageBrowseUrl = "/ckeditor/pictures";
+  // The location of a script that handles file uploads in the Image dialog.
+  config.filebrowserImageUploadUrl = "/ckeditor/pictures?";
+  // The location of a script that handles file uploads.
+  config.filebrowserUploadUrl = "/ckeditor/attachment_files";
+  config.allowedContent = true;
+  // Toolbar groups configuration.
+  config.toolbar = [
+    { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source'] },
+    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
+    // { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
+    // { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
+    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
+    { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar' ] },
+    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
+    '/',
+    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
+    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
+    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] }
+  ];
+  config.toolbar_mini = [
+    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
+    { name: 'styles', items: [ 'Font', 'FontSize' ] },
+    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
+    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
+    { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] }
+  ];
+};
\ No newline at end of file

app/models/ckeditor/asset.rb

+class Ckeditor::Asset < ActiveRecord::Base
+  include Ckeditor::Orm::ActiveRecord::AssetBase
+
+  delegate :url, :current_path, :content_type, to: :data
+
+  validates :data, presence: true
+
+  TYPES = %w( Picture )
+  before_save :set_type
+
+  def set_type
+    raiser "You must override this method in each model inheriting from Product!"
+  end
+end

app/models/ckeditor/attachment_file.rb

+class Ckeditor::AttachmentFile < Ckeditor::Asset
+  mount_uploader :data, CkeditorAttachmentFileUploader, mount_on: :data_file_name
+
+  def url_thumb
+    @url_thumb ||= Ckeditor::Utils.filethumb(filename)
+  end
+end

app/models/ckeditor/picture.rb

+class Ckeditor::Picture < Ckeditor::Asset
+  mount_uploader :data, CkeditorPictureUploader, mount_on: :data_file_name
+
+  def url_content
+    url(:content)
+  end
+
+  def set_type # If you don't implement this method, an error will be raised
+    self.type = 'Picture'
+  end
+end

app/models/project.rb

@@ -33,7 +33,5 @@ class Project < ApplicationRecord
   validates_length_of :individual_type_uk, :individual_type_en, :title_uk, :title_en,
 	:heading_uk, :heading_en, :site, :link_to_facebook, :related_links_uk,
 	:related_links_en, maximum: 200
-  validates_length_of :short_description_uk, :short_description_en, maximum: 2000
-  validates_length_of :description_uk, :description_en, maximum: 5000
   validates_format_of :slug, :with => /\A[a-z0-9]+\z/i
 end

app/uploaders/ckeditor_attachment_file_uploader.rb

+# encoding: utf-8
+require 'carrierwave'
+
+class CkeditorAttachmentFileUploader < CarrierWave::Uploader::Base
+  include Ckeditor::Backend::CarrierWave
+
+  # Include RMagick or ImageScience support:
+  # include CarrierWave::RMagick
+  # include CarrierWave::MiniMagick
+  # include CarrierWave::ImageScience
+
+  # Choose what kind of storage to use for this uploader:
+  storage :file
+
+  # Override the directory where uploaded files will be stored.
+  # This is a sensible default for uploaders that are meant to be mounted:
+  def store_dir
+    "uploads/ckeditor/attachments/#{model.id}"
+  end
+
+  # Provide a default URL as a default if there hasn't been a file uploaded:
+  # def default_url
+  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
+  # end
+
+  # Process files as they are uploaded:
+  # process :scale => [200, 300]
+  #
+  # def scale(width, height)
+  #   # do something
+  # end
+
+  # Add a white list of extensions which are allowed to be uploaded.
+  # For images you might use something like this:
+  def extension_white_list
+    Ckeditor.attachment_file_types
+  end
+end

app/uploaders/ckeditor_picture_uploader.rb

+# encoding: utf-8
+class CkeditorPictureUploader < CarrierWave::Uploader::Base
+  include Ckeditor::Backend::CarrierWave
+
+  # Include RMagick or ImageScience support:
+  # include CarrierWave::RMagick
+  include CarrierWave::MiniMagick
+  # include CarrierWave::ImageScience
+
+  # Choose what kind of storage to use for this uploader:
+  storage :file
+
+  # Override the directory where uploaded files will be stored.
+  # This is a sensible default for uploaders that are meant to be mounted:
+  def store_dir
+    "uploads/ckeditor/pictures/#{model.id}"
+  end
+
+  # Provide a default URL as a default if there hasn't been a file uploaded:
+  # def default_url
+  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
+  # end
+
+  # Process files as they are uploaded:
+  # process scale: [200, 300]
+  #
+  # def scale(width, height)
+  #   # do something
+  # end
+
+  process :extract_dimensions
+
+  # Create different versions of your uploaded files:
+  version :thumb do
+    process resize_to_fill: [118, 100]
+  end
+
+  version :content do
+    process resize_to_limit: [800, 800]
+  end
+
+  # Add a white list of extensions which are allowed to be uploaded.
+  # For images you might use something like this:
+  def extension_white_list
+    Ckeditor.image_file_types
+  end
+end

app/views/layouts/application.html.haml

@@ -6,6 +6,7 @@
     = csrf_meta_tags
     = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
     = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
+    = javascript_include_tag Ckeditor.cdn_url
     %meta{:charset => "utf-8"}
     %meta{:content => "", :name => "description"}
     %meta{:content => "width=device-width", :name => "viewport"}

app/views/projects/show.html.haml

@@ -41,12 +41,12 @@
     .project_content
       .container
         .text_container
-          #{@project.short_description}
+          = raw @project.short_description
           #slider.beer-slider{"data-beer-label" => "before"}
             = image_tag(@project.photo_after.url)
             .beer-reveal{"data-beer-label" => "after"}
               = image_tag(@project.photo_before.url)
-          #{@project.description}
+          = raw @project.description
         .imgs_wrap
           .simple_slider.clearfix
             #gallery-2.royalSlider.rsUni

config/application.rb

@@ -12,6 +12,7 @@ Bundler.require(*Rails.groups)
 
 module WarmCity
   class Application < Rails::Application
+  	config.autoload_paths += %w(#{config.root}/app/models/ckeditor)
 	config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}')]
     I18n.available_locales = [:uk, :en]
     config.i18n.default_locale = :uk

config/initializers/assets.rb

@@ -2,7 +2,7 @@
 
 # Version of your assets, change this if you want to expire all your assets.
 Rails.application.config.assets.version = '1.0'
-
+Rails.application.config.assets.precompile += %w[ckeditor/config.js]
 # Add additional assets to the asset load path
 # Rails.application.config.assets.paths << Emoji.images_path
 

config/initializers/ckeditor.rb

+Ckeditor.setup do |config|
+  require 'ckeditor/orm/active_record'
+  config.image_file_types = %w(jpg jpeg png gif tiff)
+  config.attachment_file_types = %w(doc docx xls odt ods pdf rar zip tar tar.gz swf)
+  config.js_config_url = 'ckeditor/config.js'
+  config.cdn_url = "//cdn.ckeditor.com/4.3.0/standard/ckeditor.js"
+end
\ No newline at end of file

config/locales/uk.yml

 uk:
+  time:
+   formats:
+    short: "%Y-%m-%d %H:%M:%S"

config/routes.rb

 Rails.application.routes.draw do
   scope "(:locale)", locale: /en|uk/ do
+    mount Ckeditor::Engine => '/ckeditor'
 	root 'home#index'
 	ActiveAdmin.routes(self)
     resources :users

db/migrate/20191003131124_create_ckeditor_assets.rb

+class CreateCkeditorAssets < ActiveRecord::Migration[5.0]
+  def self.up
+    create_table :ckeditor_assets do |t|
+      t.string  :data_file_name, null: false
+      t.string  :data_content_type
+      t.integer :data_file_size
+      t.string  :type
+
+      # Uncomment it to save images dimensions, if your need it
+      t.integer :width
+      t.integer :height
+
+      t.timestamps null: false
+    end
+
+    add_index :ckeditor_assets, :type
+  end
+
+  def self.down
+    drop_table :ckeditor_assets
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20191003075441) do
+ActiveRecord::Schema.define(version: 20191003131124) do
 
   create_table "active_admin_comments", force: :cascade, options: "ENGINE=InnoDB DEFAULT CHARSET=utf8" do |t|
     t.string   "namespace"
@@ -26,6 +26,18 @@ ActiveRecord::Schema.define(version: 20191003075441) do
     t.index ["resource_type", "resource_id"], name: "index_active_admin_comments_on_resource_type_and_resource_id", using: :btree
   end
 
+  create_table "ckeditor_assets", force: :cascade, options: "ENGINE=InnoDB DEFAULT CHARSET=utf8" do |t|
+    t.string   "data_file_name",    null: false
+    t.string   "data_content_type"
+    t.integer  "data_file_size"
+    t.string   "type"
+    t.integer  "width"
+    t.integer  "height"
+    t.datetime "created_at",        null: false
+    t.datetime "updated_at",        null: false
+    t.index ["type"], name: "index_ckeditor_assets_on_type", using: :btree
+  end
+
   create_table "friendly_id_slugs", force: :cascade, options: "ENGINE=InnoDB DEFAULT CHARSET=utf8" do |t|
     t.string   "slug",                      null: false
     t.integer  "sluggable_id",              null: false