Noob005
Noob005

Reputation: 127

Rails4: Bootsy WYSIWYG editor not displaying

I just migrated from Paperclip to CarrierWave and can't get the Bootsy WYSIWYG editor to display. My form (and its text field, which is now <%= f.bootsy_area :text, rows: 12 %>) looks exactly like it did before I installed Bootsy. Any ideas as to how I can make the editor display instead of the old textarea alone? Thanks.

Steps I've taken already:

  1. followed Bootsy instructions on Github
  2. compared all pages of bootsy demo app code to mine
  3. read relevant Bootsy known issues
  4. restarted server
  5. ran bundle update bootsy and restarted server
  6. removed fontawesome from application.scss
  7. read this and this and this SO question

Gemfile:

`source 'https://rubygems.org'
ruby '2.3.0'
gem 'rails', '4.2.2'
gem 'pg'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.6'
gem 'devise', '~> 3.5', '>= 3.5.6'
gem "font-awesome-rails"
gem 'paperclip', '~> 4.2'
gem 'aws-sdk', '~> 1.66'
gem 'figaro', '~> 1.1', '>= 1.1.1'
gem 'simple_form'
gem 'mail_form'
gem 'acts-as-taggable-on', '~> 3.4'
gem 'fog'
gem 'rmagick', '~> 2.15', '>= 2.15.4'
gem 'carrierwave'
gem "fog-aws"
gem 'bootsy', github: 'volmer/bootsy'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc`

article.rb

class Article < ActiveRecord::Base
  include Bootsy::Container
  mount_uploader :image, ImageUploader
  has_many :comments, dependent: :destroy
  has_attached_file :image, styles: { large: "900x900>", medium: "500x500>", thumb: "250x250>" }
  belongs_to :user
  validates :title, presence: true,
                    length: { minimum: 5 }
  validates_attachment_content_type :image, content_type: /\Aimage\/.*\Z/
  acts_as_taggable_on :tags
end

articles_controller.rb

private
  def article_params
    params.require(:article).permit(:title, :text, :image, :user_id, :subtitle, :tag_list, :bootsy_image_gallery_id)
  end

application.js:

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap
//= require bootsy
//= require_tree .

application.scss:

@import "bootstrap";
@import "bootstrap-sprockets";
@import "bootsy";
@import "font-awesome"; 
@import url(https://fonts.googleapis.com/css?family=Delius+Swash+Caps);
@import url(https://fonts.googleapis.com/css?family=Reenie+Beanie);
@import url(https://fonts.googleapis.com/css?family=Special+Elite);
@import url(https://fonts.googleapis.com/css?family=Londrina+Shadow);

_form.html.erb:

<%= form_for @article, html: {multipart: true} do |f| %>

  <% if @article.errors.any? %>
    <div id="error_explanation">
      <h2>
        <%= pluralize(@article.errors.count, "error") %> prohibited
        this article from being saved:
      </h2>
      <ul>
        <% @article.errors.full_messages.each do |msg| %>
          <li><%= msg %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <p>
    <%= f.label :image %>
    <%= f.file_field :image %>
  </p>
  <p>
    <%= f.label :title %>
    <%= f.text_field :title %>
  </p>
  <p>
    <%= f.label :subtitle %>
    <%= f.text_field :subtitle %>
  </p>

  <%= f.label :text %>
  <%= f.bootsy_area :text, rows: 12%>

  <p>
    <%= f.label :tags %>
    <%= f.text_field :tag_list %>
  </p>

  <p>
    <%= f.submit %>
  </p>

new.html.erb:

<div class="container">
    <div class="jumbotron">
        <div class="row">
        <div class="col-md-8 col-md-offset-2">

            <h1>New article</h1>
                    <%= render 'form' %>
                    <%= link_to 'Back', articles_path %>

            </div>
        </div>
    </div>
</div>

assets.rb

Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( bootsy/gallery-loader.gif )

#CSS

Rails.application.config.assets.precompile += %w( bootstrap.min.css )
Rails.application.config.assets.precompile += %w( animate.css )
Rails.application.config.assets.precompile += %w( bootstrap.css )
Rails.application.config.assets.precompile += %w( bootstrapTheme.css )
Rails.application.config.assets.precompile += %w( custom.css )
Rails.application.config.assets.precompile += %w( general.css )
Rails.application.config.assets.precompile += %w( magnific-popup.css )
Rails.application.config.assets.precompile += %w( owl.carousel.css )
Rails.application.config.assets.precompile += %w( owl.theme.css )
Rails.application.config.assets.precompile += %w( style.css )
Rails.application.config.assets.precompile += %w( bootsy.css )

Article column headings according to rails console

> Article.column_names
 => ["id", "title", "text", "created_at", "updated_at", "image_file_name", "image_content_type", "image_file_size", "image_updated_at", "user_id", "subtitle", "image"] 

Upvotes: 0

Views: 463

Answers (1)

Iztok Mocivnik
Iztok Mocivnik

Reputation: 1

I had similar problem. I solved it by moving //=require tree. higher than //=require bootsy . I can not explain why and how but worked for me.

application.js

`//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require_tree .
//= require bootsy`

Upvotes: 0

Related Questions