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

Stack Overflow用户

提问于 2017-09-19 05:32:18

回答 1查看 381关注 0票数 0

在使用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

Stack Overflow用户

发布于 2017-09-19 20:20:37

这是我的解决办法：

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)
   }
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46288524

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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