在单页应用程序中使用浏览器 'back' 按钮时 Ace Editor 中的数据损坏

Question

我在 Rails 应用程序中使用 Ace Editor 与 TurboLinks。每次加载页面时都会初始化编辑器（包括通过浏览器 'back' 按钮加载页面时）：

$(document).on('turbolinks:load', function () {
    var editor = ace.edit("editor");
});

当单击 link 到应用程序中的另一个页面，然后单击浏览器 'back' 按钮时，编辑器字段已损坏。例如，如果编辑器中的数据是：

toto
tata

进入另一个页面后返回的数据（显示在编辑器的文本区域中）变为：

12tototataXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

如何防止在我的应用程序中发生这种情况？

Answer 1

我的解决方法如下（在每个 turbolinks:load 事件中执行，包括用户使用 'back' 按钮时）：

1. 删除之前的编辑器div（仅在使用'back'按钮时存在），类似$('#editor').remove()
2. 从从未编辑过的隐藏 div 加载内容
3. 为编辑器添加一个新的 div，其中包含要编辑的内容（类似于 $('#foo').after(${content})
4. 用ace.edit("editor");
初始化编辑器