Question

我正在使用gem trix。我已经按照在线教程将图像上传到编辑器。图像上传和存储工作正常;然而，当我回去编辑帖子时，trix-editor控件并没有显示任何内容。好像它是一个空白的帖子。我还在浏览器的控制台窗口中发现以下错误，但无法追踪它发生的原因。

VM931:1 Uncaught SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at v (trix.self-e0bc0a706de91177cd7d3cf457cc5cabf40fb5662c3e1fed55c0fbc56ca16e69.js?body=1:19)
    at g.processElement (trix.self-e0bc0a706de91177cd7d3cf457cc5cabf40fb5662c3e1fed55c0fbc56ca16e69.js?body=1:19)
    at g.processNode (trix.self-e0bc0a706de91177cd7d3cf457cc5cabf40fb5662c3e1fed55c0fbc56ca16e69.js?body=1:19)
    at g.parse (trix.self-e0bc0a706de91177cd7d3cf457cc5cabf40fb5662c3e1fed55c0fbc56ca16e69.js?body=1:19)
    at Function.g.parse (trix.self-e0bc0a706de91177cd7d3cf457cc5cabf40fb5662c3e1fed55c0fbc56ca16e69.js?body=1:19)
    at Function.c.fromHTML (trix.self-e0bc0a706de91177cd7d3cf457cc5cabf40fb5662c3e1fed55c0fbc56ca16e69.js?body=1:20)
    at t.loadHTML (trix.self-e0bc0a706de91177cd7d3cf457cc5cabf40fb5662c3e1fed55c0fbc56ca16e69.js?body=1:21)
    at new a (trix.self-e0bc0a706de91177cd7d3cf457cc5cabf40fb5662c3e1fed55c0fbc56ca16e69.js?body=1:21)
    at HTMLElement.attachedCallback (trix.self-e0bc0a706de91177cd7d3cf457cc5cabf40fb5662c3e1fed55c0fbc56ca16e69.js?body=1:22)

我可以发布您喜欢的任何代码，我会尝试在下面提供我认为有用的内容。我也完全剥离了Turbolinks的应用程序，认为它可能会影响它，但我看到了同样的结果。

这是帖子＆＃34;＆＃34; body＆＃34;使用trix-editor时未显示的值

body属性的表单显示在屏幕上但是空白

<div>test<a href="/uploads/store/2cb381937ab8639f84b9ab32cfad1210.jpg" data-trix-attachment="{"contentType":"image/jpeg","filename":"3-sidesitting.jpg","filesize":67635,"height":453,"href":"/uploads/store/2cb381937ab8639f84b9ab32cfad1210.jpg","url":"/uploads/store/2cb381937ab8639f84b9ab32cfad1210.jpg","width":680}" data-trix-content-type="image/jpeg" data-trix-attributes="{"caption":"Yesssss I think it worked!"}"><figure class="attachment attachment--preview attachment--jpg"><img src="/uploads/store/2cb381937ab8639f84b9ab32cfad1210.jpg" width="680" height="453"><figcaption class="attachment__caption attachment__caption--edited">Yesssss I think it worked!</figcaption></figure></a></div>

资产/ JavaScript的/的application.js

//
//= require rails-ujs
//= require jquery
//= require bootstrap
//= require turbolinks
//= require trix
//= require_tree .

资产/ JavaScript的/ trix-uploads.coffee

$(document).on 'turbolinks:load', ->

  uploadAttachment = (attachment) ->
    csrfToken = $('meta[name="csrf-token"]').attr('content')
    file = attachment.file
    form = new FormData
    endpoint = '/images'
    form.append 'Content-Type', file.type
    form.append 'image[image]', file
    xhr = new XMLHttpRequest
    xhr.open 'POST', endpoint, true
    xhr.setRequestHeader 'X-CSRF-Token', csrfToken

    xhr.upload.onprogress = (event) ->
      progress = event.loaded / event.total * 100
      attachment.setUploadProgress progress

    xhr.onload = ->
      if @status >= 200 and @status < 300
        data = JSON.parse(@responseText)
        return attachment.setAttributes(
          url: data.url
          href: data.url)
      return

    xhr.send form

  Trix.config.attachments.preview.caption =
    name: false
    size: false
  document.addEventListener 'trix-attachment-add', (event) ->
    attachment = event.attachment
    if attachment.file
      return uploadAttachment(attachment)
    return
  return

视图/帖/ _form.html.erb

<%= simple_form_for(@post) do |form| %>
  <%= form.error_notification %>

  <div class="form-inputs">
    <%= form.input :title %>
    <%= form.input :author_id, as: :hidden, input_html: { value: current_user.id } %>
    <%= form.input :body, as: :trix_editor %>
  </div>

  <div class="form-actions">
    <%= form.button :submit %>
  </div>
<% end %>

我无法使用Rails 5中的Trix编辑器编辑带有图像附件的帖子

0 个答案: