复制富文本编辑器

Question

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

$(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元素。

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

您可以通过以下操作来测试这一点(不必相信我的话)：

$(document).ready(...)

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

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

如果是这样的话，那么我们需要重新考虑如何使用JS。

所以代码仍然存在，on意味着每一次，但是不管页面是由浏览器加载还是由turbolinks加载，我们都希望它发生一次。

我认为适当的解决办法是：

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

编辑

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

但我认为这种行为是..。对，是这样。

问题如下：

1. Summernote在<div data-provide="summernote"下面创建elems，然后设置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 (即添加类或数据属性)，但这只是一种方便的方法。

否则，通过不缓存页面，一切都会被重新执行，而且一切都是好的。

在使用Turbolinks时总是会出现复杂的情况，而不是因为它是一个糟糕的工具。但是，由于JS库是根据关于页面周期工作方式的假设工作的，所以Turbolinks是对页面周期工作方式的彻底改进。

希望这不仅有助于提供一个解决方案，而且还能提供一些理解！

干杯