Question

我正在尝试使用turbolinks的自定义错误处理方法将turbolinks和trix协同工作，我用服务器发送的html替换文档正文。

// administration.js

import Rails from 'rails-ujs'
import Turbolinks from 'turbolinks'
import Trix from 'trix'
Rails.start();
Turbolinks.start();

// TURBOLINKS - ERROR HANDLING
document.addEventListener("ajax:error", (e) => {
  if (e.detail[2].status !== 422) { return }
  document.body = e.detail[0].body
  Turbolinks.dispatch("turbolinks:load")
  scrollTo(0, 0)
})

<!-- form.html -->
<div class="small-10 columns">
  <input type="hidden" id= "body" %>
  <trix-editor input="body"></trix-editor>
</div>

有没有办法让trix编辑器重新焕发活力，或者我不得不忘记在json中替换文档正文？

Answer 1

这是我的修复：

html : 
<%= f.hidden_field :body, id: "body", data: { behavior: "trix-editor" } %>

js :
document.addEventListener("turbolinks:load", () => {
  const trixField = document.body.querySelector("[data-behavior='trix-
  editor']")
  if (document.body.contains(trixField)) {
    const fieldId = trixField.attributes["id"].value
    const trixEditor = document.createElement("trix-editor")
    trixEditor.setAttribute("input", fieldId)
    const parentDiv = trixField.parentNode
    parentDiv.insertBefore(trixEditor, trixField)
   }
});

使用Tubolinks重新初始化trix编辑器

1 个答案: