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

【问题标题】：reinitialize trix editor with Tubolinks使用 Tubolinks 重新初始化 trix 编辑器
【发布时间】：2018-02-27 12:51:20
【问题描述】：

在使用带有 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 中替换文档的正文？

【问题讨论】：

标签： javascript turbolinks trix

【解决方案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)
   }
});

【讨论】：