Ace 编辑器“定义未定义”答案

【问题标题】：Ace editor "define is not defined"Ace 编辑器“定义未定义”
【发布时间】：2012-06-08 15:17:57
【问题描述】：

我正在尝试将ace editor 添加到我的应用中。我从 github 下载了它，将“ace/lib/ace”目录放到了我的应用程序目录中，包括：

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

在我的正文标签中：

editor = ace.edit "editor"

在我的脚本标签中。我尝试在 Chrome 和 Firefox 中加载页面，但在 ace.js:46 中出现“未定义定义”。 ace.js 中的行是：

define(function(require, exports, module) {

有谁知道为什么 ace 期望 define() 函数存在以及为什么它没有找到它？这是我的来源：

<html>
  <body>
    <div id="editor">some text</div>
    <script src="ace/lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
      var editor = ace.edit("editor");
    </script>
  </body>
</html>

【问题讨论】：

我也遇到了同样的问题...你有没有弄清楚？
不，抱歉。我决定不值得我花时间。祝你好运。
事实证明，我只需要从 Git 页面下载一个包（zip 文件），而不是使用克隆的 repo（他们在 zip 中打包代码的方式略有不同文件）。所以，如果你决定再试一次，它是一个非常酷的编辑器。
同样的问题，zip在哪里下载？
如果有人还在寻找它，链接在这里：github.com/ajaxorg/ace-builds 只需点击 ZIP 下载文件夹。

标签： javascript ace-editor

【解决方案1】：

如果您已经有了源代码，那么仍然很容易做到。只需进入复制所有 ace 源的目录即可。

然后，做：

npm install
node Makefile.dryice.js

查看 wiki 了解更多详情 https://github.com/ajaxorg/ace/wiki/Building-ace

【讨论】：

谢谢。我忘了实际构建代码，您的评论提醒我这样做。哎呀。 ☺

【解决方案2】：

我通过将window.define = ace.define; 放入我的 DOMload 处理程序来破解它。

【讨论】：

【解决方案3】：

您收到此错误是因为您的页面中未包含 RequireJS JavaScript 库。

要解决此问题，请使用 ace 构建或在您的页面中包含 RequireJS。

如果您选择包含 RequireJS，您的 html 片段将如下所示：

<!-- Editor will go here -->
<div id="editor"></div>

<!-- Load RequireJS -->
<script src="lib/requirejs/require.js"></script>

<!-- Initialize ace -->
<script>

    // Tell RequireJS where ace is located
    require.config({
        paths: {
            'ace': 'lib/ace'
        }
    });

    // Load the ace module
    require(['ace/ace'], function(ace) {
        // Set up the editor
        var editor = ace.edit('editor');
        editor.setTheme('ace/theme/monokai');
        editor.getSession().setMode('ace/mode/javascript');
        // etc...
    });
</script>

【讨论】：

【解决方案4】：

在 React 中，如果您要从 ace-builds 导入任何东西，那么您的导入顺序很重要。

应该是这样的

import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-json';

不是这样的

import 'ace-builds/src-noconflict/mode-json';
import AceEditor from 'react-ace';

【讨论】：

【解决方案5】：

您也可以使用 cdn

并替换

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

类似的东西

<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js" type="text/javascript" charset="utf-8"></script>

【讨论】：

这并不能以任何方式解决问题