Cách tải trình soạn thảo ace

Tôi đang cố gắng sử dụng thư viện trình biên tập mã Ace (http://ace.ajax.org/), nhưng tôi đang gặp sự cố. Theo hướng dẫn nhúng, điều này sẽ tải các tập tin js cần thiết từ Amazons CDN.Cách tải trình soạn thảo ace

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

Tuy nhiên nó không thành công, trong Chromes an ủi nó cho thấy:

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

Tôi cũng đã cố gắng đưa các thư viện ace thư mục src-min tại địa phương và tải nó với

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

nào cũng thất bại có lỗi:

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

Cuối cùng tôi đã thử tải tất cả tài nguyên js trong thư mục ace src-min, cũng không thành công với lỗi: S

Nguồn

2013-03-24 Ben_hawk

Hãy thử này 'setUseWorker() editor.getSession (false) ; 'và xem nếu nó vẫn không thành công. Địa phương sẽ không hoạt động vì vì nó phụ thuộc vào các tệp tương đối trực tuyến khác. Đó là lý do tại sao GET tương đối thất bại. Tôi không nhận được bất kỳ lỗi nào bằng cách sử dụng liên kết trực tuyến tho đầu tiên. Có thể cái gì khác đang làm gián đoạn javascript của bạn? Bạn có thể hiển thị phiên bản đầy đủ hơn của tệp HTML/JS của mình không? –

Thật kỳ lạ, nó cũng bị lỗi trong firefox, Sau khi tôi thêm dòng bạn đã cho tôi nó hoạt động, sau đó tôi đã xóa liên kết và nó cũng hoạt động: S: S: S –

Bạn có nghĩa là bạn đã xóa liên kết trực tuyến? Đặt ''sử dụng nghiêm ngặt';' trên đầu trang của JavaScript đầu tiên của bạn và kiểm tra trong Firebug nếu bạn thấy nó lỗi ra một đối tượng không tồn tại. Nó có thể sẽ không hiển thị lỗi một cách rõ ràng trừ khi bạn kiểm tra nó. –

Tôi không thể dán tất cả mã trong nhận xét, vì vậy tôi sẽ bắt đầu trả lời câu hỏi của bạn đang cập nhật cái này. Điều này phù hợp với tôi:

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

Bạn có thể kiểm tra điều này ở cuối và xem liệu bạn có gặp sự cố không? Nếu mã này (số ít) là ok thì có lẽ một số JavaScript khác ảnh hưởng đến ACE.

Đây là một JSfiddle: http://jsfiddle.net/yDscY/. Tôi không nhận được lỗi nào trong Thanh tra phát triển của mình.

Tôi đã tìm thấy sự cố. Nếu bạn có PHP hoặc có thể làm điều đó với .htaccess. Bạn phải gửi các tiêu đề cụ thể để tuân thủ CORS (Cross Resource Resource Sharing).

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

Sau đó nó sẽ hoạt động.

Cập nhật

tôi đã không kiểm tra phần này kỹ lưỡng, nhưng nó phải làm việc.

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

Chúc may mắn!

Nguồn

2013-03-24 14:45:31

Làm việc tuyệt vời, cảm ơn người đàn ông !!, tôi sẽ cho nó đi và xem nó có hiệu quả không, cảm ơn sự giúp đỡ –

Mừng vì tôi có thể giúp :). Vui lòng quay lại câu trả lời này nếu câu trả lời vẫn còn cho bạn vấn đề và tôi sẽ cố gắng xem xét nó. –

Tôi biết điều này sẽ không trả lời câu hỏi của bạn một cách chính xác nhưng tôi viết thư này cho những người hạ cánh trên trang này và có cùng một vấn đề nơi

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

hoặc

editor.getSession().setUseWorker(false);

don' t làm việc.

Tôi gặp sự cố tương tự trên Chrome. Tôi đã thử nghiệm trang web của mình trong Firefox và Opera và nó hoạt động như mong đợi. Tôi đã gặp phải lỗi Uncaught RangeError: Maximum call stack size exceeded khi tải trang.

Giải pháp là xóa bộ nhớ cache của Chrome và nó hoạt động trở lại. Ngay cả một số control/command + shift + r hoặc control + F5 sẽ không hoạt động. Tôi theo nghĩa đen đã phải đi vào các thiết lập và làm trống bộ nhớ cache.

Một lần nữa, tôi biết điều này chỉ liên quan một phần nhưng điều này là dành cho những người khác truy cập trang này!

Nguồn

2013-03-31 18:17:32 djthoms

Câu trả lời đúng là trong các bình luận đầu tiên:

Hãy thử editor.getSession này() setUseWorker (false);. và xem liệu nó vẫn còn không thành công. Địa phương sẽ không hoạt động vì vì nó phụ thuộc vào các tệp tương đối trực tuyến khác. Đó là lý do tại sao GET tương đối thất bại. Tôi không phải là nhận bất kỳ lỗi nào bằng cách sử dụng liên kết trực tuyến đầu tiên tho. Có lẽ một cái gì đó người nào khác đang làm gián đoạn javascript của bạn? Bạn có thể hiển thị phiên bản đầy đủ của tệp HTML/JS của mình không?

- Allendar, ngày 24 tháng 3 tại 14:25

Nguồn

2013-08-21 19:10:42

Có vẻ như sửa thông báo lỗi thay vì làm việc xung quanh nó là tốt hơn. Công nhân là một kỹ thuật tối ưu hóa cần được đưa vào thay vì tránh. – ThisClark

tôi phải đối mặt với rắc rối khi cố gắng để thực hiện điều này. Mã được cung cấp trong trang chủ ACE không hoạt động đối với tôi. Tôi đã có tất cả các tập tin của tôi trong thư mục địa phương, nhưng bạn có thể sử dụng một CDN thay vào đó nếu bạn muốn.

Tôi đã đặt thư mục ace từ lib/ace vào thư mục static/ của tôi. Thay đổi phần đó thành vị trí của riêng bạn.

Tôi đã phải sử dụng Require.js api để tải ace. Đây là mã mà làm việc cho tôi:

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

Nguồn: https://github.com/ajaxorg/ace/issues/1017

Thanh toán trang này nếu bạn nhận được một số lỗi điên:. http://requirejs.org/docs/errors.html

Nguồn

2013-10-02 07:52:01

Cách tải trình soạn thảo ace

Trả lời

Các vấn đề liên quan