Переинициализировать редактор trix с помощью Tubolinks
Я пытаюсь заставить турболинки и трикс работать вместе после использования пользовательского метода обработки ошибок с турболинками, когда я заменяю тело документа на 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?
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)
}
});