Turbolinks复制富文本编辑器

Question

我使用Rails 5 with turbolinks和summernote这是一个简单的WYSIWYG编辑器。我目前正在turbolinks上加载插件：加载，如下所示：

$(document).on('turbolinks:load', function() {
  $('[data-provider="summernote"]').each(function(){
    $(this).summernote({ });
  })
}

但如果我导航到其他地方，然后按浏览器上的后退按钮，编辑器就会重复

我尝试使用jquery文件，但是插件没有加载，除非我首先加载的页面是带编辑器的页面。请帮忙。

Answer 1

我知道Rails 4.2和5之间的Turbolinks有一些变化，但这是我对此的看法。

  

在许多情况下，您只需调整代码即可收听turbolinks：load事件，该事件会在初始页面加载时触发一次，并在每次Turbolinks访问后再次触发。

https://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads

如果上述报价是正确的，那么每次您访问该页面时（无论是ready还是page:load），都会触发turbolink触发器。

现在对Turbolinks的一个误解是访问另一个页面会破坏该页面中的JavaScript元素。

这是错误的，事实上这是Turails在Rails 4.2中的一个大问题。

您可以通过以下方式对此进行测试（不必承担我的责任）：

$(document).ready(...)

然后重新加载页面，离开，然后回来。

如果您的代码仍然被实例化，那么这证明代码是持久的。

如果是这种情况，那么我们需要重新思考我们如何使用JS。

因此代码仍然存在且on每次都意味着，但我们希望它能够在浏览器或turbolinks加载页面时发生。

我认为合适的解决方案是：

$(document).one('turbolink:load', ...)

修改

我能够完美地重现这个问题。

但我认为行为是正确的。

问题如下：

1. Summernote会在<div data-provide="summernote"下面创建元素，然后设置style="display:none;
2. 缓存所有元素（包括summernote添加的元素）。
3. 然后，当代码被重新执行时（除非它的表现形式如此），代码会发现<div data-provide="summernote">只是在上面冷却并重新创建另一个summernote框。

现在出现了一个哲学问题，它将改变适用的解决方案：

  

我们应该缓存页面吗？

如果答案是肯定的，那么唯一的选择是使用summernote设置的div这个事实对我们有利。

$(document).on('turbolinks:load', function() {
  $('[data-provider="summernote"]').each(function() {
    if ($(this).is(":visible"))
      $(this).summernote()
  })
})

注意我们可以区分实例化的summernote div（即添加类或数据属性），但这只是一种方便的方法。

否则，通过不缓存页面，一切都会重新执行，一切都很好。

P.S。使用Turbolinks时总会出现问题，并非因为它是一个糟糕的工具。但是因为JS库可以解决页面循环工作的假设，而Turbolinks是对页面循环工作方式的彻底改革。

希望这不仅有助于提供解决方案，还有助于理解！

干杯