Исходный редактор Basixamp Trix WYSIWYG не сохраняет файл в приложении Rails 4

Question

Я добавил редактор Trix gem в мое приложение Rails 4 и точно выполнил инструкции на этой странице. Текст отображается правильно после сохранения сообщения (смелый/курсив/зачеркивание/абзац между всеми хорошими), НО любые изображения, которые я перетаскиваю в текстовый редактор, исчезают, когда я сохраняю сообщение. Что я делаю не так?

Спасибо.

приложение/активы/таблицы стилей/application.scss:

/* 
    *= require_self 
    *= require trix 
*/ 

@import "bootstrap"; 
@import "bootstrap-sprockets"; 
@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); 

приложение/активы/JavaScripts/application.js:

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

_form.html.erb:

<%= form_for @article, html: {multipart: true} do |f| %> 
    <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.trix_editor :text, class: 'trix-content' %> 

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

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

<% end %> 

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> 

Gemfile:

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 'trix', '~> 0.9.0' 
gem 'jbuilder', '~> 2.0' 
gem 'sdoc', '~> 0.4.0', group: :doc 

Answer 1

В этом примере я создал Image модель и контроллер, который имеет GET и POST метод к ним. Я использовал refile для обработки файлов, но он будет работать с carrierwave. Идея состоит в том, чтобы прослушать событие trix-attachment-add и отправить XHR POST на ваш ImagesController. Отсюда вы можете отправить ответ JSON на свой запрос XHR и позвонить JSON.parse, чтобы получить текст ответа. Trix ожидает, что действительный URL-адрес будет возвращен, и атрибуты, установленные в приложении. Пока это не будет сделано правильно, он будет находиться в состоянии ожидания и фактически не сохранит изображение и/или подпись.

# ImagesController 
    def create 
    @image = Image.new(image_params) 
    @image.save 

    respond_to do |format| 
     format.json { render :json => { url: Refile.attachment_url(@image, :image)} } 
    end 
    end 

# Some Javascript 

(function() { 
    var host, uploadAttachment; 

    document.addEventListener("trix-attachment-add", function(event) { 
    var attachment; 
    attachment = event.attachment; 
    if (attachment.file) { 
     return uploadAttachment(attachment); 
    } 
    }); 

    host = "/images"; 

    uploadAttachment = function(attachment) { 
    var file, form, xhr; 
    file = attachment.file; 
    form = new FormData; 
    form.append("Content-Type", file.type); 
    form.append("image[image]", file); 
    xhr = new XMLHttpRequest; 
    xhr.open("POST", host, true); 
    xhr.upload.onprogress = function(event) { 
     var progress; 
     progress = event.loaded/event.total * 100; 
     return attachment.setUploadProgress(progress); 
    }; 
    xhr.onload = function() { 
     var href, url; 
     url = href = JSON.parse(this.responseText).url; 
     return attachment.setAttributes({ 
      url: url, 
      href: href 
     }); 
    }; 
    return xhr.send(form); 
    }; 


}).call(this); 

Answer 2

В качестве альтернативы @kobaltz ответа, вы можете использовать fetch так:

uploadAttachment = function(attachment) { 
    var file, form, key, xhr; 
    file = attachment.file; 
    form = new FormData; 
    form.append("Content-Type", file.type); 
    form.append("image[picture]", file); 
    fetch(host, { 
     method: "POST", 
     body: form, 
     headers: { 
     'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'), 
     'X-Requested-With': 'XMLHttpRequest' 
     }, 
     credentials: 'same-origin' 
    }) 
    .then(function(response) { 
     if (response.ok) { 
     return response.json(); 
     } 
    }) 
    .then(function(json) { 
     var href, url; 
     url = href = json.url; 
     return attachment.setAttributes({ 
     url: url, 
     href: href 
     }); 
    }) 
    };