如何在我的网站中嵌入 ace 编辑器 [重复]答案

【问题标题】：How to embed ace editor in my website [duplicate]如何在我的网站中嵌入 ace 编辑器 [重复]
【发布时间】：2015-11-27 11:47:01
【问题描述】：

伙计们，我最近一直在使用 cloud9 ide，我想将 ace 编辑器添加到我的网站。查看 ace 编辑器，这里是链接：http://ace.c9.io/#nav=about

谁能告诉我如何将它嵌入我的网站。 ace编辑器首页给出的教程看不懂

感谢所有帮助。

【问题讨论】：

working example 给你

标签： javascript html webpage

【解决方案1】：

嵌入到您的网站上清楚地显示在网站上： http://ace.c9.io/#nav=embedding

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
    #editor { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
</head>
<body>

<div id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>

<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
</script>
</body>
</html>

Cloud9 IDE

如果您使用cloud9 IDE，您可以通过..下载编辑器。

Github：git clone git://github.com/ajaxorg/ace.git
鲍尔：bower install --save git clone git://github.com/ajaxorg/ace.git

注意：您需要构建项目。

如果您想使用预构建的，请改用： https://github.com/ajaxorg/ace-builds.git

示例这是我对 ace-editor 的设置： https://ide.c9.io/anik786/cloud-9-sandbox

【讨论】：

非常感谢它的工作
不幸的是，这会清除您可能想要显示的所有其他内容。
@JohnnyBizzle：大声笑，只需更改 css 并删除绝对值。
我几乎不会打电话给ace-builds。每个功能都是一个单独的文件（例如自动完成等）。对于语言文件，这很好，但对于每个功能？如果某处或构建器有真正的“预构建”版本，或者甚至是关于如何将pre-built 东西“构建”到单个 js 中的说明，那就太好了。他们的构建器相当懒惰，有很多 **/*.js，所以输出被定向到与输入相同的混乱结构。
这里是上面的sn-p来自：github.com/ajaxorg/ace-builds/blob/master/editor.html