Я не могу редактировать пост с вложенным изображением, используя 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 %>

0 ответов

Другие вопросы по тегам