2013-10-09 6 views
2

터보 링크를 사용하는 페이지에 ACE 편집기를 구현하려고합니다. 그러나 편집기는 해당 페이지를 직접 호출하거나 페이지를 다시로드 할 때만 작동합니다. 편집기로 이동하면 필요한 모든 단계를 실행하지 않아도 편집기가 작동합니다.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 편집기 (또는 다른 외부 라이브러리)를 여기에 포함시키는 적절한 방법은 무엇입니까? 스프로킷을 통해로드하는 것은 작동하지 않으며,이를 vendor/javascripts/에 복사하고 스프로킷 매니페스트에서 요구할 때 제대로 실행하려면 심각한 문제가 있습니다.

터보 링크에 대한 깨달음과 적절한 방법은 무엇입니까?

+1

Turbolinks는 URL로 탐색 할 때만 페이지 콘텐츠를 다시로드합니다. 즉, 자바 스크립트가로드/다시로드되지 않음을 의미합니다.이 보석을 사용해보십시오. [jquery.turbolinks] (https://github.com/kossnocorp/jquery.turbolinks), it 문제를 해결할 수 있습니다. –

답변

0

필요한 js 파일을 가져 와서 vendor/javascript 경로에 넣으면 해결할 수 있습니다. 공백과 탭 (다른 사람들이 여기에보고 함)에 대한 특수 문자의 초기 문제는 파일을 BOM과 함께 utf8로 명시 적으로 저장하면 해결할 수 있습니다.

+1

에이스와 터보 링크에 문제가 있습니다. 파일이 크고 관리자 인터페이스에서만 편집기를 사용하기 때문에 자산 파이프 라인에 넣고 싶지 않습니다. 앱의 모든 사용자가 편집기를 다운로드하도록하는 것은 공정하지 않은 것처럼 보입니다. – mscriven

관련 문제