如何将 Froala 编辑器文件上传与 Rails 4.2 集成答案

【问题标题】：How to integrate Froala Editor File upload with Rails 4.2如何将 Froala 编辑器文件上传与 Rails 4.2 集成
【发布时间】：2016-01-19 20:13:25
【问题描述】：

在我的 Rails 4.2 应用程序中，我想使用 Froala Editor 上传大约 20-50 个文档 (pdf/docx/rtf/txt)，并将上传的文档保存在路径 /public/media/documents 中。我想将上传的内容发布到/admin/media/documents#upload。理想情况下，当我单击编辑器中的文件上传按钮时，我还想从已经上传的文档中进行选择。

在发生这种情况的表单上，我有一些这样开头的 javascript：

javascript:   $('#page_content').editable({
    imageUploadURL: '/admin/media/documents/',  /not sure about this
    inlineMode: false,
    theme: 'royal',
    // Set custom buttons with separator between them.
    buttons: ['html', 'sep', 'undo', 'redo', ...

有人可以帮我解决拼图中缺少的部分吗？

【问题讨论】：

标签： javascript ruby-on-rails-4.2 froala

【解决方案1】：

你需要添加

javascript:   $('#page_content').editable({
    imageUploadURL: '/admin/media/documents/',
    imageUploadMethod: 'POST'
}

以carrierwave为例：Carrierwave，你可能需要通读一遍

将 gem 添加到您的 Gem 文件中

gem 'carrierwave'

然后

bundle install

通过载波创建上传器模型

rails g uploader Image

看起来像这样：

-- app/model/uploader/image_uploader.rb
class ImageUploader < CarrierWave::Uploader::Base

    storage :file

    def store_dir
        "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
    end
end

会在app/model/uploaders中生成image_uploader.rb

在您的文档模型中：

class document < ActiveRecord::Base
    mount_uploader :picture, ImageUploader
end

所以现在你需要为你的上传创建一个路由，从你的路径来看，它可能看起来像 =>

-- config/route.rb

resource :admin do
    resource :media do
      post 'documents' => 'documents#upload'
    end
end

在您的文档中，您需要执行上传操作，以节省时间和明确答案。我将跳过 csrf 令牌验证。

class DocumentsController < ApplicationController
    skip_before_filter :verify_authenticity_token 

    ...
    # you need you adjust your code.
    def upload
        @document = admin.media.documents.new 
        @document.picture = params[:file]
        @document.save

        respond_to do |format|
            format.json { render :json => { status: 'OK', link: @document.picture.url}}
        end
    end
    ...
end

希望这能清楚地解释问题。

【讨论】：