Ace 在线编辑器的安装报错 ace is not defined - 文章教程

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

发布于 2019-02-19 字数 2501 浏览 4157 评论 0

刚刚做了一个在线运行 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>

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3