Как загрузить редактор туза

Я пытаюсь использовать библиотеку редактора кода 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

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

<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

Ответ 1

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

<!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 или вы можете сделать это с помощью .htaccess. Вы должны отправить определенные заголовки для соответствия 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>

Удачи!

Ответ 2

Правильный ответ в первом комментарии:

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

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

Ответ 3

У меня возникли проблемы при попытке сделать это. Код, указанный на домашней странице 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

Ответ 4

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

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

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