Question

我正在尝试将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中得到“define is not defined”：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>

Answer 1

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

然后，做：

npm install
node Makefile.dryice.js

有关其他详细信息，请参阅Wiki https://github.com/ajaxorg/ace/wiki/Building-ace

Answer 2

您收到此错误的原因是您的网页中未包含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>

Answer 3

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

Answer 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';

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

Ace编辑器“定义未定义”

5 个答案: