1

私は宝石を使用してい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 が影響している可能性があると考えてアプリケーションから Turbolinks を完全に削除しましたが、同じ結果が得られました。

これは、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>

assets/javascript/application.js

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

assets/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 %>
4

0 に答える 0