如何加载一个编辑器

How to load ace editor

本文关键字：编辑器 一个 加载 何加载      更新时间：2023-09-26

我正在尝试使用Ace代码编辑器库(http://ace.ajax.org/)，但我遇到了麻烦。根据嵌入指南，这应该从amazon CDN加载所需的js文件。

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

然而它失败了，在chrome控制台显示:

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

我无法将所有代码粘贴到注释中，所以我将通过更新这一个开始回答您的问题。

<!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(跨域资源共享)。

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>

祝你好运!

正确答案在第一条注释中:

试试这个editor.getSession().setUseWorker(false);看看它是否仍然失败。本地不能工作，因为它依赖于其他在线相关文件。这就是相对GET失败的原因。我不是使用第一个联机链接时出现任何错误。也许一些否则会打断你的javascript?你能展示一个更完整的版本吗你的HTML/JS文件?

- Allendar , 14章25条的3月24日在

我在尝试完成这项工作时遇到了麻烦。在ACE主页上给出的代码不适合我。我所有的文件都在本地目录，但如果你愿意，你可以使用CDN代替。

我把ace目录从lib/ace放入我的static/目录。将该部分更改为您自己的位置。

我必须使用Require.js api来加载ace。这是为我工作的代码:

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

我知道这不能完全回答你的问题，但我写这篇文章是为了那些登陆这个页面并有同样问题的人，

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

或

editor.getSession().setUseWorker(false);

不工作。

我在Chrome上有同样的问题。我在火狐和Opera上测试了我的网站，结果和预期的一样。加载页面时，我一直得到Uncaught RangeError: Maximum call stack size exceeded错误。

解决方案是清空Chrome的缓存，它再次工作。即使是control/command + shift + r或control + F5也不行。我不得不进入设置并清空缓存

再一次，我知道这只是部分相关，但这是为其他谁登陆这个页面!
相关文章：