Destroy and intialize ckeditor on browser history back

When a page with ckeditor is restored from browser cache by using browser
history back feature application was trying to re-initialize it but this was
throwing some javascript errors that left ckeditor useless. The ckeditor user
interface seemed to be loaded correctly but editor contents was not shown
and ckeditor locked.

This solution is about destroying all ckeditor instances on page before
leaving it and force the reinitialization after Turbolinks restored the cache.
Inspiration here [1].

There is a similar patch to make it work with Turbolinks 5.x versions [2].

  [1] https://github.com/galetahub/ckeditor/issues/575#issuecomment-132757961
  [2] https://github.com/galetahub/ckeditor/issues/575#issuecomment-241185136

app/assets/javascripts/ckeditor/reinit.js

@@ -1,7 +0,0 @@
-$(document).on("page:change", function() {
-  if (typeof(CKEDITOR) != "undefined"){
-    for(name in CKEDITOR.instances){
-      try{CKEDITOR.replace(name);}catch(err){};
-    }
-  }
-});

app/assets/javascripts/html_editor.js

@@ -1,6 +1,11 @@
 (function() {
   "use strict";
   App.HTMLEditor = {
+    destroy: function() {
+      for (var name in CKEDITOR.instances) {
+        CKEDITOR.instances[name].destroy();
+      }
+    },
     initialize: function() {
       $("textarea.html-area").each(function() {
         if ($(this).hasClass("admin")) {
@@ -11,4 +16,7 @@
       });
     }
   };
+
+  $(document).on("page:before-unload", App.HTMLEditor.destroy);
+  $(document).on("page:restore", App.HTMLEditor.initialize);
 }).call(this);

spec/system/ckeditor_spec.rb

@@ -51,4 +51,20 @@ describe "CKEditor" do
     expect(page).not_to have_link "Upload"
     expect(page).not_to have_link "Browse Server"
   end
+
+  context "When navigating back to editor page using browser history back" do
+    scenario "display ckeditor unsaved contents", :js do
+      login_as(create(:administrator).user)
+
+      visit new_admin_newsletter_path
+      fill_in_ckeditor "Email content", with: "This is an unsaved body"
+      click_link "Newsletters"
+
+      expect(page).to have_link "New newsletter"
+
+      go_back
+
+      expect(page).to have_ckeditor "Email content", with: "This is an unsaved body"
+    end
+  end
 end