CKEDITOR + CARRIERWAVE + S3 no image - ruby-on-rails

Question

I can't figure out why the heck CKEDITOR is not displaying my images...I am using Carrierwave as my uploader to S3, which obviously have been set to all have their own 'uploader.rb' If I upload directly through Carrierwave I have no problems retrieving said image back from S3 to display. BUT if I upload said image through CKEDITOR or attach it inside CKEDITOR it will only display it's source link. This happens in both production and dev localhost.
uploaders/ckeditor_attachement_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:
if Rails.env.production?
storage :fog
else
storage :file
end
# 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
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:
if Rails.env.production?
storage :fog
else
storage :file
end
# 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
models/picture.rb
class Ckeditor::Picture < Ckeditor::Asset
mount_uploader :data, CkeditorPictureUploader, mount_on: :data_file_name
def url_content
url(:content)
end
end
models/attachement_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

Answer 1

I know I am answering my own question but hopefully this will help you. If you are reading this then you obviously have all your storage set up correctly such as S3 (in my case). Your views must require the html_safe method when attempting to display your contents via ckeditor ex.
<div class="col-xs-12">
<h1>Webur Blog</h1>
<h2><%= #blogpost.title %></h2>
<span><p><%= image_tag #blogpost.picture.url if #blogpost.picture? %></p></span>
<p><%= #blogpost.content.html_safe %></p>
<% if is_an_admin %>
<%= link_to "Return to blog", blogposts_path, class: 'btn btn-primary' %>
<%= link_to "Edit Post", edit_blogpost_path, class: 'btn btn-primary' %> |
<%= link_to "Delete Post", blogpost_path(#blogpost),
method: :delete, data: {confirm: "Are you sure?"}, class: 'btn btn-danger' %>
<% else %>
<%= link_to "Return to blog", blogposts_path, class: 'btn btn primary' %>
<% end %>
</div>
Hopefully this helps others. CKeditor does not mention this in their setup guide, and if you are a beginner such as myself you may not catch subtleties like this