Я не могу редактировать пост с вложенным изображением, используя Trix Editor в Rails 5
Я использую драгоценный камень 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 из приложения, думая, что, может быть, это влияет, но я видел те же результаты.
Вот значение "body" поста, которое не отображается при использовании 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 %>