2

我正在尝试在使用 turbolinks 的页面中实现 ACE 编辑器。但是，编辑器仅在我直接调用该页面或重新加载页面时才起作用。导航到它不会触发使编辑器工作的所有必要步骤。

当前集成： 

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

这会抛出一个Uncaught TypeError: Cannot read property 'ace/ace' of undefined.离开页面后，js 似乎卡在页面上，并且在每次导航加载时，我都会得到一个 Uncaught ReferenceError: ace is not defined.

在此处包含 ACE 编辑器（或其他外部库）的正确方法是什么？通过 sprockets 加载它们是行不通的，当将它们复制到vendor/javascripts/sprockets 清单中并要求它们时，我很难让它正常运行。

关于turbolinks和正确方法的任何启示？

4

1 回答 1

0

我可以通过获取所需的 js 文件并将它们放入 vendor/javascript 路径来解决它。空格和制表符的特殊字符的初始问题（其他人也在此处报告）可以通过将文件显式存储为带有 BOM 的 utf8 来解决。

于 2013-10-16T07:02:35.083 回答