私は宝石を使用してい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 %>