Rails 4 - 如何使用carrierwave在froala编辑器中上传图像？

Question

我一直坚持要在froala编辑器中进行图片上传.我有载波工作用于将图像上传到我的应用程序的其他部分的谷歌云存储,现在我想在froala编辑器中上传图像.

这是我到目前为止所做的

发布图片uplaoder

class PostImageUploader < CarrierWave::Uploader::Base

  # Choose what kind of storage to use for this uploader:
   storage :fog

  # 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
    "post-image"
  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
     %w(jpg jpeg gif png)
   end

  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  def filename
   "#{model.id}-#{original_filename}" if original_filename.present?
  end

end

我制作了一个后期图像模型

class PostImage < ActiveRecord::Base
  belongs_to :post
  mount_uploader :image, PostImageUploader
  validate  :image_size

    # Validates the size of an uploaded picture.
    def image_size
      if image.size > 5.megabytes
        errors.add(:picture, "should be less than 5MB")
      end
    end

end

我在我的帖子控制器中制作attach和制作detach方法,但我不知道该放入哪些内容.

 def attach
 end

 def detach
 end

 def image_params
   params.require(:post_image).permit(:image)
 end

制定了附加和分离方法的路线,但它们可能是错误的,因为我不确定我是否需要这些方法.

match '/guides/:guide_id/posts/attach' => 'posts#attach', :via => :create, as: :attach_guide_post_image
match '/guides/:guide_id/posts/detach'=> 'posts#detach', :via => :delete, as: :detach_guide_post_image

我的carriwewave初始化程序设置和工作(因为我在网站上的其他地方使用它)所以我不认为我需要添加它.我不认为我需要添加我的帖子控制器new和create方法,他们的漂亮股票标准.

从这里我去了froala文档上传图片,但我不知道要放入什么值,我需要哪些值,哪些不需要.我的问题是用大写字母写的评论.

 <script>
  $(function() {
    $('.editor')
      .froalaeditor({
        // Set the image upload parameter.
        imageUploadParam: 'image',
        // 1. I'M GUESSING THIS IS THE PARAM PASSED

        // Set the image upload URL.
        imageUploadURL: <%= attach_guide_post_image_path =%>,
        // 2. MADE THIS PATH IN THE ROUTES


        // Set request type.
        imageUploadMethod: 'POST',

        // Set max image size to 5MB.
        imageMaxSize: 5 * 1024 * 1024,

        // Allow to upload PNG and JPG.
        imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif']
      })
      .on('froalaEditor.image.beforeUpload', function (e, editor, images) {
        // Return false if you want to stop the image upload.

        //3. SO I PUT ERROR MESSAGE IN THESE?? IF SO SHOULD IT BE A POPUP OR TEXT ON THE SCREEN AND HOW
      })
      .on('froalaEditor.image.uploaded', function (e, editor, response) {
        // Image was uploaded to the server.
      })
      .on('froalaEditor.image.inserted', function (e, editor, $img, response) {
        // Image was inserted in the editor.
      })
      .on('froalaEditor.image.replaced', function (e, editor, $img, response) {
        // Image was replaced in the editor.
      })
      .on('froalaEditor.image.error', function (e, editor, error, response) {
        // Bad link.
        else if (error.code == 1) { ... }

        // No link in upload response.
        else if (error.code == 2) { ... }

        // Error during image upload.
        else if (error.code == 3) { ... }

        // Parsing response failed.
        else if (error.code == 4) { ... }

        // Image too text-large.
        else if (error.code == 5) { ... }

        // Invalid image type.
        else if (error.code == 6) { ... }

        // Image can be uploaded only to same domain in IE 8 and IE 9.
        else if (error.code == 7) { ... }

        // Response contains the original server response to the request if available.
      });
  });
</script>

这就是我得到的.我知道基本的JS,并且已经使用rails大约6个月,所以我相当新.我从未在rails和js中做过这样的事情,也找不到可靠的指南.

以上是我得到的,我被困住了.希望从那里需要做些什么来获得图片上传工作的帮助.

Answer 1

如果您使用的是 froala gem，他们在这里有一个开放的问题https://github.com/froala/wysiwyg-rails/issues/22