Как загрузить Ace editor

Я пытаюсь использовать библиотеку редактора кода Ace (http://ace.ajax.org/), но у меня проблемы. Согласно Руководству по встраиванию, это должно загрузить необходимые JS-файлы из Amazons CDN.

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

однако он терпит неудачу, в консоли Chromes он показывает:

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

Я также попытался поместить папку Ace library src-min локально и загрузить ее с

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

который также не удалось с ошибками:

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

наконец я попытался загрузка всех ресурсов js в папку Ace src-min, которая также не удалась с ошибками: S

18
cdn code-editor html javascript

4 ответов

Я не могу вставить весь код в комментарий, поэтому я начну отвечать на ваш вопрос, что на обновления этого. Это прекрасно работает для меня:

<!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/. Я не получаю ошибок в моем инспекторе развития.

Я нашел проблему. Если у вас есть PHP или могу это сделать .реврайт. Вы должны отправить определенные заголовки в соответствии с CORS (совместное использование ресурсов Cross Origin).

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>

удачи!

9

правильный ответ находится в первом комментарии:

попробуйте этот редактор.getSession().setUseWorker (false); и посмотреть, если он все еще неудачи. Local не будет работать, потому что он зависит от других онлайн относительные файлы. Вот почему относительные GET терпят неудачу. Я не получение каких-либо ошибок с помощью первой онлайн-ссылки tho. Может быть, что-то else прерывает ваш javascript? Можете ли вы показать более полную версию ваш файл HTML / JS?

- Allendar, 24 марта в 14:25

3

я столкнулся с проблемами при попытке сделать это. Код, приведенный на домашней странице ACE, не работал для меня. У меня были все мои файлы в локальном каталоге, но вы можете использовать CDN вместо этого, если хотите.

я разместил каталог ace из lib/ace в свою

1

Я знаю, что это не ответит на ваш вопрос точно, но я пишу это для людей, которые приземляются на этой странице и имеют ту же проблему, где

<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 не работа. Я буквально пришлось зайти в настройки и очистить кэш.

опять же, я знаю, что это только частично актуально, но это для других, кто приземляется на этой странице!

0