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);

应用/资产/ Javascript角/ 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

在此示例中，我创建了一个org.springframework.ejb.support.AbstractJmsMessageDrivenBean模型和控制器，它们具有Image和GET方法。我使用POST来处理文件上传，但它与refile类似。我们的目的是聆听活动carrierwave并向trix-attachment-add发送XHR POST。从这里，您可以将JSON响应发送回XHR请求并致电ImagesController以捕获响应文本。 Trix期望返回有效的URL并在附件上设置属性。在此操作正确完成之前，它将处于暂挂状态，而不是实际保存图像和/或标题。

JSON.parse

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
      });
    })
  };

Basecamp的Trix WYSIWYG编辑器gem不在Rails 4 app中保存文件附件

2 个答案: