CKEDITOR + CARRIERWAVE + S3无图像

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