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?
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.