如何加载 ace 编辑器

2023-12-21

我正在尝试使用 Ace 代码编辑器库(http://ace.ajax.org/ 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

最后我尝试加载 ace src-min 文件夹中的所有 js 资源,也失败并出现错误: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/ http://jsfiddle.net/yDscY/。我的开发检查器中没有出现任何错误。

我发现了问题。如果您有 PHP 或者可以使用 .htaccess 来完成。您必须发送特定标头才能遵守 CORS(跨源资源共享)。

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

之后它应该可以工作。

Update

我没有彻底测试这部分,但它应该可以工作。

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

祝你好运!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何加载 ace 编辑器 的相关文章

随机推荐

  • 为什么在测试 MediaRecorder 示例时出现致命异常?

    我使用 Android Studio 在真实设备中测试示例 E Android SDK samples android 22 media MediaRecorder 出现以下错误 为什么 样本中是否存在一些错误 顺便说一句 我的 Andro
  • 返回按钮和上次活动

    我的应用程序链接了一些活动 如果您按后退按钮 您会返回到旧的活动 然后您会突然退出应用程序 所以如果它是堆栈上的最后一个活动 我需要显示一条消息 例如 你真的想退出吗 我知道如何覆盖后退按钮 但我不知道如何知道历史中有多少活动 Overri
  • 为 SQL Server 中的字段生成唯一哈希

    我正在编写一个会员提供程序 以便与我们现有的会员基础一起使用 我使用 EF4 1 进行所有数据库访问 我遇到的问题之一是 当数据库最初设置时 关系是以编程方式完成的 而不是在数据库中完成的 一种是如果需要在并非所有用户都需要的列上建立关系
  • 如何在WebRTC对等连接中创建数据通道?

    我正在尝试学习如何创建一个RTCPeerConnection这样我就可以使用DataChannelAPI 这是我根据我的理解尝试过的 var client new mozRTCPeerConnection var server new mo
  • PHP、PDO 和异常

    我目前对于 PDO 有点进退两难 我最近转而从我自己的自定义数据库类中使用它 因为我想利用事务 我面临的问题是如何从已经用 PDO 的 try catch 包装的代码块内部抛出异常 这是一个例子 try PDO code Transacti
  • 如何在React hooks中自动停止setInterval?

    我想构建一个循环进度条 计数到 60 然后自动停止 但它无法停止 我想使用 React hooks 和 useEffect 我的代码在这里 https codesandbox io s nostalgic khorana lijdyo fi
  • 如何在 iOS 15 Xcode 13 中将 TabView tabItem 上的填充图标更改为不填充?

    如何将 iOS 15 Xcode 13 中的 TabView tabItem 上的填充图标更改为不填充 现在看来图标是默认填充的 我的代码 import SwiftUI struct Test Home V View var body so
  • Promise.catch() 在 AngularJS 单元测试中没有捕获异常

    我正在 Typescript 中为我的应用程序编写 Jasmine 单元测试 并通过 Resharper 运行它们 如果处理程序抛出异常 它应该执行一个操作 describe Q Service Test gt var q ng IQSer
  • 边缘会话.cookie_lifetime

    我的网站功能在 Edge 上损坏 尤其是登录 有人告诉我这与session cookie lifetime 对于此事的任何帮助 我将不胜感激 请注意 我不是开发人员 没有任何代码知识 我的一些 php ini 文件 如果有帮助的话 sess
  • 查找上个月

    我见过一些使用的方法dateutil模块来执行此操作 但是有没有一种方法可以在不使用内置库的情况下执行此操作 例如 当前月份是七月 我可以使用datetime now 功能 python 返回上个月的最简单方法是什么 这很简单 gt gt
  • 是否可以在函数内使用 Excel 数组中的单个单元格引用?

    我有一些数据想要放入 LOGEST 函数中 e g x values 0 463 0 609 0 887 y values 0 05 0 1 0 2 For this example I have put the data into the
  • asyncio 和 trio 之间的核心区别是什么?

    今天 我发现了一个名为trio http trio readthedocs io en latest index html它说它自己是一个供人类使用的异步 API 这些词有点相似requests As requests确实是一个不错的库 我
  • 如何在队列上设置 ActiveMQ redeliveryPolicy?

    如何在队列上的 ActiveMQ 中设置 redeliveryPolicy 1 在文档中 请参阅 activeMQ 重新传送 http activemq apache org redelivery policy html 说明您应该在 Co
  • 如何使用 Microsoft.Graph 将文件附加到 Sharepoint 中的项目

    Microsoft Graph Sharepoint api 允许更新列表项https developer microsoft com en us graph docs api reference beta api listitem upd
  • 1 和 0 的大字符串到 BitSet

    我有一个非常大的字符串 64 个字符 其中包含 1 和 0 样本 1001111111101010011101101011100101001010111000101111011110001000 我想要的只是将其转换为 BitSet var
  • 丰富 SparkContext 而不会引发序列化问题

    我正在尝试使用 Spark 处理来自 HBase 表的数据 这篇博文 http www vidyasource com blog Programming Scala Java Data Hadoop Analytics 2014 01 25
  • 在 Ubuntu 18.10 上安装 ROS Melodic

    I can t是唯一对 Cosmic 与 Wayland 和 Melodic 的组合感兴趣的人 我会坦白说 我似乎已经在 XPS 13 9370 上成功管理了此操作 或者至少安装脚本 最终 成功完成 然而 有一个非常棘手的解决方法 无论结果
  • 当 debug == 0 时如何手动刷新模型缓存?

    每当我在 CakePHP 站点的生产版本上对数据库进行更改 其中调试设置为 0 时 这些更改都不会反映出来 我知道我可以通过暂时将 debug 更改为 2 来解决此问题 但是当大量人访问此站点时 这似乎不安全 我查看了缓存文件 但由于尚无相
  • VS Code 中的 Node.js TypeScript 调试

    有人可以提供 VS Code 配置的示例吗 它允许我 启动 Node js 调试器 编辑任何 TS 文件 看到项目重新编译并重新启动调试器吗 这是开箱即用的支持吗 能nodemon以某种方式被使用 谢谢 是的 您可以使用nodemon 在您
  • 如何加载 ace 编辑器

    我正在尝试使用 Ace 代码编辑器库 http ace ajax org http ace ajax org 但我遇到了麻烦 根据嵌入指南 这应该从 Amazon CDN 加载所需的 js 文件 然而它失败了 在 Chrome 控制台中显示