에이스 편집기를로드하는 방법

에이스 코드 편집기 라이브러리 (http://ace.ajax.org/)를 사용하려고하는데 문제가 있습니다. 임베딩 가이드에 따르면, 이것은 Amazons CDN에서 필요한 js 파일을로드해야합니다. 그것의 Chromes를 콘솔에 실패 그러나에이스 편집기를로드하는 방법

<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

보여줍니다 :

Could not load worker ace.js:1 
DOMException {message: "SecurityError: DOM Exception 18", name: "SecurityError", code: 18, stack: "Error: An attempt was made to break through the se…cloudfront.net/src-min-noconflict/ace.js:1:76296)", INDEX_SIZE_ERR: 1…} 
ace.js:1

나는 또한 또한 실패

<script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>

와 함께 로컬 에이스 라이브러리 SRC 분 폴더를 넣고로드 시도

오류 :

Uncaught RangeError: Maximum call stack size exceeded 
GET http://mysite/mode-javascript.js 404 (Not Found) 123f2c9_ace_1.js:1 
GET http://mysite/notes/theme-monokai.js 404 (Not Found) 123f2c9_ace_1.js:1 
Uncaught RangeError: Maximum call stack size exceeded

마지막으로 에이스 src-min 폴더에있는 모든 js 리소스를로드하려고 시도했는데 오류도 발생하지 않았습니다. S

출처

2013-03-24 Ben_hawk

이'editor.getSession() setUseWorker 시도 (거짓)을 ;과 그것이 아직도 실패하는지보십시오. 로컬은 다른 온라인 상대 파일에 종속되어 있기 때문에 작동하지 않습니다. 그것이 상대 GET이 실패하는 이유입니다. 첫 번째 온라인 링크를 사용하여 오류가 발생하지 않습니다. 어쩌면 뭔가 다른 자바 스크립트를 방해하고 있습니까? HTML/JS 파일의 더 완전한 버전을 보여줄 수 있습니까? –

정말 이상한데, 파이어 폭스에서도 오류가 있었다. 나는 당신이 나에게 준 라인을 추가 한 후에 링크를 제거했다. S : S : S –

당신은 온라인 링크를 제거 했습니까? 첫 번째 자바 스크립트의 맨 위에''use strict ';'를 쓰고, 존재하지 않는 객체에 오류가 있으면 Firebug에 체크인하십시오. 확인하지 않으면 오류가 명시 적으로 표시되지 않을 것입니다. –

나는 모든 코드를 주석에 붙여 넣을 수 없으므로 다음 질문에 답을 할 것입니다. 이 중 하나를 업데이 트하십시오. 이 문제는 정상적으로 작동합니다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>HTML</title> 
    <style> 
     #editor { 
       position: absolute; 
       top: 0; 
       right: 0; 
       bottom: 0; 
       left: 0; 
      } 
    </style> 
</head> 
<body> 
    <div id="editor"> 
     function foo(items) { 
      var x = "All this is syntax highlighted"; 
      return x; 
     } 
    </div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script> 
    <script> 
     var editor = ace.edit("editor"); 
     editor.setTheme("ace/theme/monokai"); 
     editor.getSession().setMode("ace/mode/javascript"); 
    </script> 
</body> 
</html>

문제를 아직 테스트 할 수 있습니까? 이 코드 (단수)가 괜찮 으면 다른 JavaScript가 ACE에 영향을 미친 것일 수 있습니다.

다음은 JSfiddle : http://jsfiddle.net/yDscY/입니다. Development Inspector에서 오류가 발생하지 않습니다.

문제점을 발견했습니다. PHP가 있거나 .htaccess로 할 수있는 경우. CORS (Cross Origin Resource Sharing)를 준수하려면 특정 헤더를 보내야합니다.

access-control-allow-origin: * 
access-control-allow-credentials: true

그 후에 작동해야합니다.

업데이트

나는 철저하게이 부분을 테스트하지 않았다,하지만 작동합니다.

<IfModule mod_headers.c> 
    Header set Access-Control-Allow-Origin "*" 
    Header set Access-Control-Allow-Credentials: "true" 
</IfModule>

행운을 빈다!

출처

2013-03-24 14:45:31

굉장한 일, 고마워 !! !! 나는 그걸 줄 것이고 그것이 효과가 있는지보기 위해서 도움을 주겠다. –

다행히 도울 수있어 :). 문제가 계속된다면이 대답으로 돌아가서 조사해 보겠습니다. –

나는이 정확하게 귀하의 질문에 대답하지 않을 것이다 알고 있지만 나는이 페이지에 착륙과 같은 문제를 가진 사람이 쓰고 있어요 어디

<IfModule mod_headers.c> 
    Header set Access-Control-Allow-Origin "*" 
    Header set Access-Control-Allow-Credentials: "true" 
</IfModule>

또는

editor.getSession().setUseWorker(false);

돈 ' 일하지 마라.

Chrome에서 동일한 문제가있었습니다. Firefox 및 Opera에서 내 사이트를 테스트 한 결과 예상대로 작동했습니다. 페이지를로드 할 때 계속 Uncaught RangeError: Maximum call stack size exceeded 오류가 발생했습니다.

해결책은 Chrome의 캐시를 비우는 것이 었으며 다시 작동했습니다. control/command + shift + r 또는 control + F5조차도 작동하지 않습니다. 말 그대로 설정에 들어가서 캐시를 비워야했습니다.

다시 부분적으로 만 관련이 있지만이 페이지의 다른 사용자에게 적합하다는 것을 알고 있습니다!

출처

2013-03-31 18:17:32 djthoms

정답은 첫 번째 주석에 있습니다

)가 (이 editor.getSession 시도 (false)를 setUseWorker;. 여전히 이 실패하는지 확인하십시오. 다른 온라인 상대 파일에 의존하기 때문에 로컬이 작동하지 않습니다. 그것이 상대 GET이 실패하는 이유입니다. 나는 첫 번째 온라인 링크를 사용하여 모든 오류가 발생하지 않습니다. 어쩌면 뭔가 다른 자바 스크립트를 방해하고 있습니까? HTML/JS 파일의 더 완전한 버전을 보여줄 수 있습니까?

-이 끝내야 할 때 14시 25분

출처

2013-08-21 19:10:42

오류 메시지를 수정하는 것보다는 오류 메시지를 수정하는 것이 좋습니다. 근로자는 피하기보다는 포함되어야하는 최적화 기법이다. – ThisClark

에서 Allendar 3 월 24 일 나는 문제에 직면했다. ACE 홈페이지에 제공된 코드가 저에게 효과적이지 않았습니다. 내 모든 파일을 로컬 디렉토리에 가지고 있지만 원하는 경우 CDN을 대신 사용할 수 있습니다.

lib/ace의 에이스 디렉토리를 static/ 디렉토리에 두었습니다. 해당 부분을 자신의 위치로 변경하십시오.

에이스를로드하려면 Require.js API를 사용해야했습니다. 이것은 나를 위해 일한 코드입니다 :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>ACE in Action</title> 
<style type="text/css" media="screen"> 
    #editor { 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
    } 
</style> 
</head> 
<body> 

<div id="editor"> 
    function foo(items) { 
    var x = "All this is syntax highlighted"; 
    return x; 
    } 
</div> 
<script type="text/javascript" src="/static/require.js"></script> 
<script> 
    require.config({ 
     baseUrl: window.location.protocol + "//" + window.location.host 
      + window.location.pathname.split("/").slice(0, -1).join("/"), 

     paths: { 
      ace: "/static/ace" 
     } 
    }); 

    require(["ace/ace"], function (ace) { 
     var editor = ace.edit("editor"); 
     editor.setTheme("ace/theme/monokai"); 
     editor.getSession().setMode("ace/mode/javascript"); 
    }); 
</script> 
</body> 
</html>

출처 :. https://github.com/ajaxorg/ace/issues/1017

체크 아웃이 페이지는 어떤 미친 오류를 얻을 경우 : http://requirejs.org/docs/errors.html

출처

2013-10-02 07:52:01

에이스 편집기를로드하는 방법

답변

관련 문제