王牌编辑器“定义未定义”

Ace editor "define is not defined"

本文关键字：定义未定义 未定义 定义 编辑器 王牌      更新时间：2023-09-26

我正在尝试将 ace 编辑器添加到我的应用程序中。我从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>

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

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

然后，执行：

npm install
node Makefile.dryice.js

有关更多详细信息，请参阅维基https://github.com/ajaxorg/ace/wiki/Building-ace

您收到此错误是因为 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>

在 React 中，如果您要从 ace-build 导入任何内容，那么您的导入顺序很重要。

应该是这样的

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

不是这样的

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

或者，您可以使用 CDN

  • http://cdnjs.com/libraries/ace/
  • http://www.jsdelivr.com/#!ace

并替换 

<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>
相关文章：