Ace 在线编辑器的安装报错 ace is not defined

Question

刚刚做了一个在线运行 HTML 代码的小工具，使用的是 Ace 这款在线编辑器插件，在按照常规的方法安装插件的时候出现了两个报错，我想很多使用这款插件的人肯定遇到了这个问题，现在把详细的解决方法分享给大家。

常规安装方法

安装常规的插件使用方法，我们在使用ace插件时候只需要引入ace.js文件即可：

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

然后在给一个 DIV 添加 ID editor

<div id="editor">some text</div>

最后再调用这个插件

var editor = ace.edit("editor");

我以为这样就可以使用插件了，但是会出现两个报错：

define is not defined
ace is not defined

一时想不通这到底哪里出错了，查看了项目的 github 的使用方法，也是这样的。

解决方法

在 stackoverflow 网站上找到了解决方法，这是因为插件使用一种按需加载（暂且这么称呼）的功能，需要require.js文件来加载插件的文件，然而这个插件并没有包含这个文件，或者说是我们使用方法不正确。

正确安装插件

如果你已经有了源代码，那么它是很容易做到，在你复制所有 ACE 源目录中去，运行下面的代码。

npm install
node Makefile.dryice.js

更多详解请参加 https://github.com/ajaxorg/ace/wiki/Building-ace

使用 requirejs 加载文件

还有一种方法就是使用上面提到的 require.js 插件。 你得到这个错误因为 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>