Turbolinks external javascript (here: ACE editor)

Question

I am trying to implement an ACE editor in a page which uses turbolinks. However, the editor only works when I directly call that page, or when I reload the page. Navigating to it won't trigger every necessary step to make the editor work.

Current integration:

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.8/require.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/mode-html.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/mode-css.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
  function initialize_editor() {
    var editor = ace.edit("html-editor");
    editor.setTheme("ace/theme/clouds");
    editor.getSession().setMode("ace/mode/html");
    editor.setValue($('#template_html').val());

    $('form').on('submit', function(event) {
      $('#template_html').val(editor.getValue());
    });
  }

  $(document).ready(initialize_editor);
  $(document).on('page:load', initialize_editor);
</script>

This throws an Uncaught TypeError: Cannot read property 'ace/ace' of undefined. After leaving the page, the js seems to be stuck on the page, and on every navigation load, I get an Uncaught ReferenceError: ace is not defined.

What's the proper way to include ACE editor (or other external libraries) here? Loading them via sprockets won't work, and when copying them into vendor/javascripts/ and requiring them in the sprockets manifest, I had serious trouble getting it to run properly.

Any enlightenment about turbolinks and a proper way?

Answer 1

I could solve it by fetching the required js files and putting them into the vendor/javascript path. The initial problem with special chars for spaces and tabs (also reported here by others) could be solved by storing the files explicitly as utf8 with BOM.